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 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Validation of all elements on submit

    How would I go about checking on submit if the user wants to leave the box unchecked and then validate all the form elements except the checkbox?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <html>
    
        <head>
        	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
            <script type="text/javascript">
    
                function checkuserName() {
    
                    var the_input = document.getElementById('userName').value;
    
                    if (!/^[A-Z]/.test(the_input))   {
    
                        alert('Your username must begin with a capital letter.');
    					document.getElementById('userName').value = "";
                        return false;
    
                    } 
    
                }
               
               function checkzip()  {
    var the_input = document.getElementById('zip').value;
    if (!/^\d{5}$/.test(the_input)) {
    alert('You can only enter a 5-digit number');
    document.getElementById('zip').value = "";
    return false;
    }
    }
    	function checkmoney()  {
    var the_input = document.getElementById('money').value;
    
    if (!/^\$( )*\d*(.\d{2})?$/.test(the_input)){
    	alert('American currency beginning with $');
    document.getElementById('money').value = "";
    return false;
    }
    	}
               function checkarea()  {
    var the_input = document.getElementById('area').value;
    if (!/^[\w\d]{30,100}$/.test(the_input)) {
    alert('You Must Enter 30 Characters');
    document.getElementById('area').value = "";
    return false;
    }
    }
    var btn = valButton(form.radio);
    	function checkbutton() {
    if (btn == ""){
    	 alert('No radio button selected');
    document.getElementByType('radio').value = ""
    return false;
    }
    
    	}
    	
    function allowReset() { 
        return window.confirm("Go ahead and clear the form?"); 
    } 
    function allowSend() { 
        return window.confirm("Are you ready to submit?"); 
    } 
               
    
            </script>
    
        </head>
    
        <body>
    
        <form action="form" method="get" name="form" onreset="return allowReset()" onsubmit="return allowSend()">
    
                <p>First Name:<br />
    
                <input type="text" name="userName" id="userName" onblur="checkuserName()" size="25" /><br />
                Zipcode:<br />
                <input type="text" name="zip" id="zip" onblur="checkzip()" size="25" /> <br/>
                How much money do you have?<br />
                 <input type="text" name="money" id="money" onblur="checkmoney()" size="25" /><br />
                 Gender:<br/>
                 <input type="radio" name="sex" value="male" onblur="checkbutton()" >Male<br>
    <input type="radio" name="sex" value="female" onblur="checkbutton()">Female<br />
                 Tell us about yourself: <br />
                 <textarea name="area" id="area" onblur="checkarea()" cols="30" rows="5"></textarea> <br />
                Check to stay on this page. <br />
                <input type="checkbox" name="agree" value="yes">Check It!<br> 
                <br />
                <input type="submit" value="Submit">
                <input type="reset" value="Reset">
                 
              </p>
               
                
              
                 
                  
                
        </form>
    
        </body>
    
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    <input type="radio" name="sex" value="male" onblur="checkbutton()" >Male<br>
    <input type="radio" name="sex" value="female" onblur="checkbutton()">Female<br />


    You cannot use onblur with radio buttons. You must use onclick and loop through the buttons to get the value of the one selected.

    Code:
    function checkButton() {
    var f = document.form.sex;
    for (var i=0; i <f.length; i++) {
    if (f.[i].checked) {
    var gender = f[i].value;
    }
    }
    }
    I am unclear as to the purpose of the checkbox. Is it something like

    Code:
    function chkbox() {
    if (!document.form.agree.checked) {
    var c = confirm ("You have not checked the checkbox.  Is that what you want to do"?);
    if (!c) {
    document.form.agree.checked= true;  // check the box
    }
    }
    }

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts
    so I've made some edits to the code. What i'm looking to happen is it will verify the use wants to leave the box unchecked and then from there verify all the other form field.
    As of now it is verifying the radio button and the text length but it won't return anything after that.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <html>
    
        <head>
        	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
            <script type="text/javascript">
    /*<![CDATA[*/
                
               function checkzip()  {
    var the_input = document.getElementById('zip').value;
    if (!/^\d{5}$/.test(the_input)) {
    alert('You can only enter a 5-digit number');
    document.getElementById('zip').value = "";
    return false;
    }
    }
    
    function checkuserName() {
    
                    var the_input = document.getElementById('userName').value;
    
                    if (!/^[A-Z]/.test(the_input))   {
    
                        alert('Your username must begin with a capital letter.');
    					document.getElementById('userName').value = "";
                        return false;
    
                    } 
    
                }
               
    	function checkmoney()  {
    var the_input = document.getElementById('money').value;
    
    if (!/^\$( )*\d*(.\d{2})?$/.test(the_input)){
    	alert('American currency beginning with $');
    document.getElementById('money').value = "";
    return false;
    }
    	}
     
    function update_counter(counter, text_elem, max_len)
    {
        var counterElem = document.getElementById(counter);
        var textElem = document.getElementById(text_elem);
        var len = textElem.value.length;
        var val = max_len - textElem.value.length;
        counterElem.innerHTML = val; 
    }
    
    
    function check_content_length(elem_id, max_len)
    {
        var elem = document.getElementById(elem_id);
        if(elem.value.length != max_len) {
            return false;
        }
        return true;
    }
    
    var MAX = 30;
    function check_char_length(elem_id, max_len)
    {
        if(check_content_length(elem_id, max_len)) {
    	return true;
        } else {
    	
    	alert("Required length is " + max_len + " characters");
    	return false;
        }
    }
    	
    	
    	
    function allowReset() { 
        return window.confirm("Go ahead and clear the form?"); 
    } 
    function allowSend(elem_id, max_len) { 
    
    
    if (!document.form.agree.checked) {
    var c = confirm ("You have not checked the checkbox.  Is that what you want to do?");
    
    if (!c) {
    document.form.agree.checked= true;  // check the box
    
    }
    
    }
    var radio_check_val = "";
            for (i = 0; i < document.getElementsByName('gender').length; i++) {
                if (document.getElementsByName('gender')[i].checked) {
                    
                    radio_check_val = document.getElementsByName('gender')[i].value;
                  
    
                }
    
            }
            if (radio_check_val === "")
            {
            	
                alert("please select radio button");
            }
    
    
    
    {
        
        return check_char_length('text_fld', MAX);
        return checkzip();
       }
         
    } 
    
           
    /*]]>*/
            </script>
    
        </head>
    
        <body onload="update_counter('text_counter','text_fld', MAX);">
    
        <form action method="get" name="form" onreset="return allowReset()" onsubmit="return allowSend()">
    
               <p> Zip Code: <br />
                <input type="text" name="zip" id="zip" onblur="checkzip()" size="25" /> <br/>
                First Name:<br />
    
                <input type="text" name="userName" id="userName" onblur="checkuserName()" size="25" /><br />
                
                How much money do you have?<br />
                 <input type="text" name="money" id="money" onblur="checkmoney()" size="25" /><br />
                 Tell us about yourself: <br />
                 Enter EXACTLY 30 characters:<br />
            <textarea id="text_fld" name="text_fld" rows="4" cols="40" onkeyup="update_counter('text_counter', 'text_fld', MAX)" onblur="return check_char_length('text_fld', MAX);" >Default text</textarea>
                  <span id="text_counter">8</span> characters left<br />
                 Gender:<br/>
                 <input type="radio" name="gender" value="male" >Male<br>
    			<input type="radio" name="gender" value="female" >Female<br />
                 
                Check to stay on this page after completion. <br />
                <input type="checkbox" name="agree" value="yes">Check It!<br> 
                <br />
                What do you like? <br />
                <select name="randoms">
                	<option></option>
    	<option value="Pizza">Pizza</option>
    	<option value="Cake">Cake</option>
    	<option value="Aliens">Aliens</option>
    	<option value="Computers">Computers</option>
    			</select> <br /> <br />
                
                <input type="submit" value="Submit">
                <input type="reset" value="Reset">
                 
              </p>
               
                
              
                 
                  
                
        </form>
    
        </body>
    
    </html>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    At a glance,

    var MAX = 30;
    MAX is never referred to. You have another variable named max_len.

    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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