SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru hifigrafix's Avatar
    Join Date
    Oct 2005
    Location
    Nashville, TN
    Posts
    628
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Checkbox Validation

    Greetings I've got a form element <input type="checkbox" name="terms" id="terms" />

    I want to validate this checkbox so that the form can't be submitted unless it's checked.

    I'm using the following script to validate my other elements:

    HTML Code:
    function validateForm(form) { 
    
    if (form.first_name.value == "") { 
       alert("Please enter your first name."); 
       form.first_name.focus( ); 
       return false; 
       }
       
     if (form.last_name.value == "") {  
       alert("Please enter your last name."); 
       form.last_name.focus( ); 
       return false; 
       }
    
    if (form.address1.value == "") {
    
       alert("Please enter your address."); 
       form.address.focus( ); 
       return false; 
       }
       
    if (form.city.value == "") { 
       alert("Please enter your city."); 
       form.city.focus( ); 
       return false; 
       }
       
       if (form.state.value == "") { 
       alert("Please enter your state."); 
       form.state.focus( );
       return false;
       }
    
    if (form.zip.value == "") {
       alert("Please enter your zip.");
       form.zip.focus( ); 
       return false; 
       }
       
       if (form.phone.value == "") { 
       alert("Please enter your phone."); 
       form.phone.focus( );
       return false; 
       }
       
       if (form.Emergency_Name.value == "") { 
       alert("Please enter your emergency name."); 
       form.Emergency_Name.focus( );
       return false;
       }
       
       if (form.Emergency_Phone.value == "") { 
       alert("Please enter your emergency phone.");
       form.Emergency_Phone.focus( );
       return false;
       }
       
    	
    	if( form.terms.checked != true) {
    	alert("Please agree to our Disclaimer");
    	return false;
    	}
    
    }
    For some reason it's not working any suggestions?

    Thanks
    jw

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You don't submit the form anywhere.
    Code:
    function validateForm(form) { 
    
    if (form.first_name.value == "") { 
       alert("Please enter your first name."); 
       form.first_name.focus( ); 
       return false; 
       }
       
     if (form.last_name.value == "") {  
       alert("Please enter your last name."); 
       form.last_name.focus( ); 
       return false; 
       }
    
    if (form.address1.value == "") {
    
       alert("Please enter your address."); 
       form.address.focus( ); 
       return false; 
       }
       
    if (form.city.value == "") { 
       alert("Please enter your city."); 
       form.city.focus( ); 
       return false; 
       }
       
       if (form.state.value == "") { 
       alert("Please enter your state."); 
       form.state.focus( );
       return false;
       }
    
    if (form.zip.value == "") {
       alert("Please enter your zip.");
       form.zip.focus( ); 
       return false; 
       }
       
       if (form.phone.value == "") { 
       alert("Please enter your phone."); 
       form.phone.focus( );
       return false; 
       }
       
       if (form.Emergency_Name.value == "") { 
       alert("Please enter your emergency name."); 
       form.Emergency_Name.focus( );
       return false;
       }
       
       if (form.Emergency_Phone.value == "") { 
       alert("Please enter your emergency phone.");
       form.Emergency_Phone.focus( );
       return false;
       }
       
    	
       if( form.terms.checked != true) {
       alert("Please agree to our Disclaimer");
       return false;
       }
             
       form.submit();
    }
    And make sure you have "return false" in onsubmit event:
    HTML Code:
    <form name="form1" onsubmit="validateForm(this); return false">
    Saul

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    San Francisco, CA
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually you could keep your code as is, and have the form tag should say
    Code:
    <form onsubmit="return validateForm(this)">
    Although you should have a return true; at the end of your validateForm function.

    If it is not working, it might also be because of a Javascript errors, if you got one of the form field's names wrong, for instance.

    Firefox is a great browser for checking for errors like this. Under tools there is a Javascript Console which shows JS and CSS errors and warning (in Firefox 2 it is called the Error console).

    You could also put a try catch block around all the validation

    Code:
    function validateForm(form) {
        try {
            // validation here
            return true;
        }
        catch (objError) {
            alert(objError)
            return false;
        }
    }

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If none of the checkboxes are checked, browsers by default send the value of the first checkbox. I'd set the checked value in the 'don't agree' field and check for that.


Bookmarks

Posting Permissions

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