Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    validating a form with multiple field conditionals

    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:

    Code:
    <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!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    This should move you forward:-

    Code:
    <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
    Last edited by Philip M; 12-08-2009 at 07:31 PM.

  • #3
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks,
    i've been trying to append this into jquery validation and i keep getting the error:
    Code:
    missing : after property id
    with this:
    Code:
    $("#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??

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by dsalo View Post
    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" )) {

  • #5
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    $("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.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by dsalo View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •