...

View Full Version : validating a form with multiple field conditionals



dsalo
12-08-2009, 06:04 PM
I am somewhat a noob at js/jquery so I wasn't sure exactly how to do this. Think I just need a push in the right direction. Basically I'm trying to validate a form (jquery validation) with a couple of conditionals based on a selection box. So I have:



<form id="info" class="validate">

<select id="select">
<option value="senior">Senior Citizen</option>
<option value="adult">Adult</option>
<option value="child">Child</option>
</select>

<input type="text" name="age" id="age" class="required" minlength="1" maxlength="3" title="age group">

</form>


I'm trying to validate that if the user has selected "Senior Citizen" then their age must be 65 or older (and validate the adult/child ages as well). I hope to get this all in ajax so it would be checking it live. Thanks for the help!

Philip M
12-08-2009, 07:26 PM
This should move you forward:-


<script type = "text/javascript">
function checkAges(a) {
if ((isNaN(a.value)) || (a.value <0) || (a.value >110)){
alert ("You must enter a valid age!");
document.info.age.value = "";
myfield = a; // note myfield must be a global variable
setTimeout('myfield.focus();myfield.select();' , 10);
return false;
}
av = a.value;
var b = document.info.select.value;
if ((b == "senior") && (av < 65)) {
alert ("Senior Citizen Age must be 65 or over");
document.info.age.value = "";
myfield = a;
setTimeout('myfield.focus();myfield.select();' , 10);
return false;
}
if ((b == "child") && (av > 18)) {
alert ("Children's age must be under 18");
document.info.age.value = "";
myfield = a;
setTimeout('myfield.focus();myfield.select();' , 10);
return false;
}
if ((b == "adult") && ((av < 18) || (av > 65))) {
alert ("Adult age must be 19 - 64");
document.info.age.value = "";
myfield = a;
setTimeout('myfield.focus();myfield.select();' , 10);
return false;
}

}

</script>

<form name = "info" id="info" class="validate">
<select name = "select" id="select">
<option value="senior">Senior Citizen</option>
<option value="adult">Adult</option>
<option value="child">Child</option>
</select>

Enter your age <input type="text" name="age" id="age" class="required" minlength="1" maxlength="3" title="age group" onblur ="checkAges(this)">

</form>

For form elements use name rather than id.

We have been asked to correct our report on the wedding last week. On return from honeymoon the happy couple will be staying at The Old Manse and not as we stated at the home of the bridegroom's father. - Woking Review

dsalo
12-08-2009, 10:15 PM
thanks,
i've been trying to append this into jquery validation and i keep getting the error:


missing : after property id


with this:


$("#getQuoteForm")
.validate({

if($('input#age).val() > 18 && $('select#select') == "child" ) {
rules: {
age: {
required: true,
number: true,
min: 1,
max: 17,
messages: {
required: "Age of Applicant",
minlength: jQuery.format("error message for length")
}
}
}
}
});


it errors right at the start of:
if($('input#age).val() > 18 && $('select#select') == "child" ) {

any suggestions??

Philip M
12-09-2009, 08:53 AM
it errors right at the start of:
if($('input#age).val() > 18 && $('select#select') == "child" ) {

any suggestions??

Try if(($('input#age).val() > 18) && ($('select#select') == "child" )) {

dsalo
12-09-2009, 05:28 PM
yeah that didn't seem to work either...
I'm assuming that I have to follow jQuery's options within validate,
like submitHandler: and rules:
the only annoying part is just wanting to stick in a if statement without it failing. jQuery's options in validate don't seem to have exactly what I'm looking for.

dsalo
12-09-2009, 06:56 PM
alright, well im getting closer to this but i've come across a separate error involving a loop within a click in jQuery. So I have:



$("input#button").click(function (){


$('input.age').each(function (i){
var recipient = $('input#r'+i).attr('value');
var age = $('input#age'+i).val();
if(age > 25 && recipient == "d") {

$(".formErrors")
.append( "error" )
.show( 500 );

return false;

} else {
return true;
}

});
});


which doesn't produce any errors in firebug, but just simply won't work when clicking the button. i think it's looping through and the first input.age in the each method is resulting in true and so it assumes everything is okay. im just trying to say loop through all of these conditions and if no errors then say true. hope that makes sense. it works fine in firebug if i run it starting at the .each method.

Philip M
12-09-2009, 08:03 PM
i think it's looping through and the first input.age in the each method is resulting in true and so it assumes everything is okay. im just trying to say loop through all of these conditions and if no errors then say true. hope that makes sense. it works fine in firebug if i run it starting at the .each method.

Simply delete the red. A
} else {
return true;
}


return true is the default, so not necessary. If you want you can add return true before the final closing brace.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum