www.webdeveloper.com
Results 1 to 2 of 2

Thread: Form Validation Form Help! ! ! My code is not working! ! ! !

  1. #1
    Join Date
    Aug 2011
    Posts
    7

    Form Validation Form Help! ! ! My code is not working! ! ! !

    Here is my code, however it is not working. May someone please help me to show me what I am doing wrong?



    function emailForm()
    {
    var x=document.forms["contact"]["email"].value;

    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
    document.contact.email.style.backgroundColor = "#FFB0B0";

    }else{
    document.contact.email.style.backgroundColor = "#B0FFB0";

    }

    }//end email Form
    function ageForm()
    {
    if (parseInt(document.contact.age.value) < 18 ||
    parseInt(document.contact.age.value) > 65)
    {
    document.contact.age.style.backgroundColor = "#FFB0B0";

    }else{
    document.contact.age.style.backgroundColor = "#B0FFB0";

    }

    }//end of age form


    <body>
    <form name="contact" onsubmit="emailForm(); ageForm() " >

    <p>Email:
    <input type="text" name="email">
    </p>
    <p>Age:
    <input type="text" name="age">
    </p>
    <p>
    <input type="submit" value="Submit">
    </p>
    </form>
    </body>


  2. #2
    Join Date
    May 2008
    Posts
    18

    Maybe you are trying to do this

    I guess you are trying to provide feedback to the user as he/she fills out the form by coloring the fields. Then also safeguarding against submitting the form while there are still form fields that are used incorrectly.

    For checking a field when a user exits the field you can use 'onblur' on the fields. For safeguarding against incorrect forms being submitted you can use a function which returns a boolean in the 'onsubmit' event of the form.

    Hope this helps.

    Kind regards,
    Ryan.

    Code:
    <html>
    <head>
    	<title></title>
    </head>
    <script type="text/javascript">
    
    var red   = "#FFB0B0";
    var green = "#B0FFB0";
    
    function emailForm()
    {
    var x=document.forms["contact"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
    {
    	document.contact.email.style.backgroundColor = red;
    	return false;
    }else{
    	document.contact.email.style.backgroundColor = green;
    	return true;
    }
    
    }//end email Form
    function ageForm()
    {
    if (parseInt(document.contact.age.value) < 18 ||
    parseInt(document.contact.age.value) > 65)
    {
    	document.contact.age.style.backgroundColor = red;
    	return false;
    }else{
    	document.contact.age.style.backgroundColor = green;
    	return true;
    }
    
    }//end of age form
    
    function ValidateFormFields(){
    	var bSend = false
    	if (emailForm() && ageForm()){
    		// if both fields are correnct allow submit to continue
    		bSend =  true;
    	}
    	if (!bSend) { alert("please correct the form") };
    	return bSend;
    }
    </script>
    
    <body>
    <form name="contact" onsubmit="return ValidateFormFields(); " action="http://www.google.com">
    
    <p>Email:
    <input type="text" name="email" onblur="emailForm()">
    </p>
    <p>Age:
    <input type="text" name="age" onblur="ageForm()">
    </p>
    <p>
    <input type="submit" value="Submit">
    </p>
    </form>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles