• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 602
  • Last Modified:

cfselect validation

Experts-

I'm using a cfselect statement, and want to make sure the user has selected something.  I've added an <option value="">Select and attribute</option> to the <cfselect>  I also added a little checkForm javascript function, but I am unable to catch the cfselect if the user doesn't select something.  Can someone tell me how I would go about correcting this?  Below is the code from the <cfselect> and also the bit of script that I wrote.

I'm using cfform and have this onSubmit="return checkForm(this)"  Is onsubmit allowed in cfform?

Thanks
nick
<cfselect name="attributes"
		query="getattributes"
		value="attributeID"
		display="attributeName"
		required="yes"
		validateAt="onsubmit,onserver"
		multiple="no"
		queryposition="below">
		<option value="">Select an Attribute</option>
	</cfselect>

<!--- javascript code --->
<script type="text/javascript">
function isblank(s){
  return (s.replace(/\s*/g,"")=="");
}

function checkForm(theForm){
    if(theForm.attributes<1 || theForm.attributes == "Select an Attribute"){
   	alert("Please select and attribute for this element.");
	theForm.attributes.focus();
	return false;
   }
   
	

  return true;
}
</script>

Open in new window

0
nmarano
Asked:
nmarano
  • 8
  • 5
  • 4
1 Solution
 
coldchillinCommented:
Add ".value" to your javascript:

function checkForm(theForm){
    if(theForm.attributes.value < 1 || theForm.attributes.value  == "Select an Attribute"){
         alert("Please select and attribute for this element.");
      theForm.attributes.focus();
      return false;
   }
0
 
coldchillinCommented:
Personally, I would use this:

if(theForm.attributes.value == "") {
//code
}
0
 
nmaranoAuthor Commented:
Thanks!  I tried your suggestion, but it's bypassing the check.  My function now looks like this...

function checkForm(theForm){
    if(theForm.attributes.value == "") {
         alert("Please select an attribute for this element.");
      theForm.attributes.focus();
      return false;
   }
   
return true;
}

And my <cfselect> looks like this...
<cfselect name="attributes"
       query="getattributes"
       value="attributeID"
       display="attributeName"
       required="yes"
       multiple="no"
       queryposition="below">
       <option value="">Select an Attribute</option>
      </cfselect>
0
How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

 
_agx_Commented:
but it's bypassing the check.

Either you're not calling the function or it has an error.  Are you actually calling checkForm() in your <cfform> code or somewhere else?  If not, that's your problem.  

<!--- something like ...--->
<cfform onSubmit="return checkForm(this)"...>

If you're already doing that, then check the errorConsole in FF for code errors.
0
 
coldchillinCommented:
Also,

I noticed that from your second post you removed the

            validateAt="onsubmit,onserver"

So add this back to your select:

<cfform action="act_form.cfm" onsubmit="return checkForm(this)">

<cfselect name="attributes"
            query="getattributes"
            value="attributeID"
            display="attributeName"
            required="yes"
            validateAt="onsubmit,onserver"
            multiple="no"
            queryposition="below">
            <option value="">Select an Attribute</option>
      </cfselect>

<input type="submit" value="I like pizza" />
</cfform>
0
 
_agx_Commented:
.... onsubmit="return checkForm(this)">

Wait... I think I see the problem.  IIRC when CF calls the checkForm function "this" doesn't refer to the js form object. So trying to access form.attributes causes an causes an error.  Assuming you're not using CF9, try instead:

<script ...>
function checkForm(){
	var list = document.getElementById('attributes');
    if(list.options[list.selectedIndex].value == "") {
        alert("Please select an attribute for this element.");
      	theForm.attributes.focus();
      	return false;
   }
	return true;
}
</script>

<!--- give it an ID too --->
<cfselect id="attributes" name="attributes" ....>

Open in new window



0
 
coldchillinCommented:
_aqx,

That's typically how I go about things, but I was able to use :

onsubmit="return checkForm(this)">


<script language=javascript>


function checkForm(theForm){

   if(theForm.attributes.value == ""){
   	alert("Please select and attribute for this element.");
	theForm.attributes.focus();
	return false;
   } else { 
        return true; 
   }

}

</script>

</head>


<cfquery datasource="db" name="Distributors">
SELECT DISTINCT value, label
FROM mytable
</cfquery>

<cfform name="theForm" action="" onsubmit="return checkForm(this)">
<cfselect name="attributes"
		query="Distributors"
		value="value"
		display="label"
		required="yes"
		validateAt="onsubmit,onserver"
		multiple="no"
		queryposition="below">
		<option value="">Select an Attribute</option>
	</cfselect>

	<input type="submit" value="submit">
</cfform>

Open in new window

0
 
_agx_Commented:
@coldchillin,

I believe you. But it gives me an error on CF9.  I vaguely remember problems w/another version too (mx7 maybe)?  Assuming it's not a CFIDE mapping problem, it sounds like nick might be seeing the same behavior.  I'd check FF's error console and see if there's a problem ...
0
 
_agx_Commented:
>> ... onsubmit="return checkForm(this)"> <<<

Yeah, I think it's a scoping/reference problem. It works w/CF9 if you change "this" to:

          return checkForm(_CF_this)

( ...Just for grins here's another version that uses onValidate. Tested w/CF9 ...)

<script>
	function listSelectionRequired(f, fld, value) {
		return value.replace(/\s+/g, "").length > 0;
	}
</script>

<cfform>
<cfselect id="attributes"
           name="attributes"
            query="getattributes"
            value="attributeID"
            display="attributeName"
            required="yes"
            validateAt="onsubmit"
	    onValidate="listSelectionRequired"
            multiple="no"
	    message="Select an attribute!"
            queryposition="below">
            <option value="">Select an Attribute</option>
      </cfselect>

<input type="submit" value="Who doesn't like pizza?" />
</cfform>

Open in new window

0
 
coldchillinCommented:
I'm using CF8 over here.

_agx_,

If you had multile cf controls, each with validation, validating onsubmit, would you use validateAt/onValidate for each control,

or a single validation function on the forms submit?
0
 
nmaranoAuthor Commented:
agx-

I'm using CF 9 and had no issue using onsubmit="return checkForm(this)">  in the past with cf 7.  Since i am using cfform and cfselect, is there a way to validate within the cfselect?  I know I can set validate ="yes", but since I added the <option value="">Please select an attribute</option> as the first option, it seems like it is always true.
0
 
_agx_Commented:
Nick -

1) What do you mean by validate ="yes", maybe you meant onValidate?  The code above (using onValidate) worked fine for me w/CF9 and the empty string <option>.  Did you try it?

2) What's interesting is it also worked in CF9 just by adding required=true.  

<cfform>
	<cfselect name="attributes"
            query="getattributes"
            value="attributeID"
            display="attributeName"
			required="true"
            validateAt="onsubmit"
            multiple="no"
			message="Select an attribute!"
            queryposition="below">
            <option value="">Select an Attribute</option>
      </cfselect>

<input type="submit" value="I like pizza" />
</cfform>

Open in new window

0
 
_agx_Commented:
>> 2) What's interesting is it also worked in CF9 just by adding required=true.  <<

Wait .. on 2nd thought, I'd have to check it on another machine.  I know I've added this cfform fix to one of my dev machines.  So that might be why required=true it's working for me
http://www.barthle.com/blog/post.cfm/cfselect-validation-bug-still-exists-in-cf9
0
 
nmaranoAuthor Commented:
agx-
Sorry, I meant required ="true" and validateAt="onSubmit, onServer"

I tried your script and it does work with CF 9...just trying to figure out why my script wouldn't work!

Thanks for the help.
0
 
_agx_Commented:
@coldchillin - it depends. there's advantages to both.  if most of the fields used the same validation function or 2, and you're using cfform anyway, then I'd probably go with validateAt/onValidate.  So all the code for each control is in one place. Plus cfform displays all errors in a single js alert rather than multiple popups. But on the flip side you have more control writing a single function for onSubmit.  ... of course these days i'd probably go with a jquery validation lib ;-)
0
 
_agx_Commented:
Nick - Looks like our posts crossed :)

>> Sorry, I meant required ="true" and validateAt="onSubmit, onServer"
>> just trying to figure out why my script wouldn't work!

If you mean why required=true doesn't work ..  I suspect it's (still) broken. I've probably applied a  cfform.js script fix and that's why it works for me.

If you mean why onSubmit="return checkForm(this)" doesn't work, it's the scoping problem I mentioned before.  The form reference needs to be "_CF_this" not "this".

So you've got at least 2 choices. Either
1) use <cfform onSubmit="return checkForm(_CF_this)" ....> OR
2) use <cfselect onValidate="..." validateAt="onsubmit">
0
 
nmaranoAuthor Commented:
agx-

Thanks for the fix...so it's safe to say this is a cf 9 issue since I am able to use my original check form with CF 7, and coldchillin was able to use CF 8.

Thank you both for your comments.

agx- You also stated that you would just use jquery lib...can you recommend a good site to learn jQuery?

Thanks
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 8
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now