SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form Validation - onsubmit 2nd time

    Hi All,
    I am in a JavaScript college class and right now we are learning about form validation, well before server side validation, and I am having an issue with validating the field if the user updates it and hits submit again. The red .setAttribute function is not removed. My code is below, please excuse the noobness I am displaying here. We start learning JQuery next week so this may be moot by then...

    My question is, what am I missing to make the form validate on the second submit?

    Code:
        <script type="text/javascript" language="javascript">
    //<![CDATA[
        window.onload = (function()
        {
    		document.getElementById("fn1").focus();
    		function showerr(elmnt)
    		{
    			document.getElementById(elmnt).setAttribute("style","background-color:#ff0000;");
    			//attributes on page 327
    		}
    		function validate(f)
    		{
    
    			if(!f.first.value.match(/^\w/)) //matches any character, entry \d is digit
    			{	
    				showerr("fn1");
    			}
    			
    			if (!f.last.value.match(/^\w/))
    			{
    				showerr("ln1");
    			}
    		 return false
    		}
    		document.myform.onsubmit =
    		(
    			function() 
    			{
    			  return validate(this)	  
    			}
    			
    		);
        }
    	);
    	
        //]]>
        </script>
    HTML:
    Code:
    	<form name="myform">
    		<label id="lfn1" for="fn1">First Name:</label>
    		<input type="text" id="fn1" name="first" /><br />
    		<label id="lln1" for="ln1">Last Name:</label>
    		<input type="text" id="ln1" name="last" /><br />
    		<label id="lph1" for="ph1">Phone Number:</label>
    		<input type="text" id="ph1" name="phone" /><br />
    		Gender:<br />
    		<label for="chk1">Male</label>
    		<input type="checkbox" id="chk1" />&nbsp;
    		<label for="chk2">Female</label>
    		<input type="checkbox" id="chk2" />&nbsp;
    		<label for="chk3">Identity Crisis</label>
    		<input type="checkbox" id="chk3" />&nbsp;
    		<br /><br />
    		<input type="submit" name="submit" value="SUBMIT" id="" />
        </form>
    Last edited by Cascus; Jul 30, 2010 at 00:07. Reason: Forgot to add form code
    Jim L.
    Student, Husband, Uncle, oh..and Web Developer.

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Re-set the background-color before validation.

    Also setAttribute for style does not work in IE
    Code:
    document.getElementById(elmnt).style.backgroundColor = "#ff0000";
    Also note the change to camel-case for hyphenated properties.

  3. #3
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I am not sure I understand how to re-set the background-color before validation. Are you meaning to move the function showerr() outside the window.onload event handler?
    Thanks.
    Here is my new code:
    Code:
        <script type="text/javascript" language="javascript">
    //<![CDATA[
        window.onload = (function()
        {
    		document.getElementById("fn1").focus();
    		function showerr(elmnt)
    		{
    			document.getElementById(elmnt).style.backgroundColor = "#ff0000";
    			//attributes on page 327
    		}
    		function validate(f)
    		{
    
    			if(!f.first.value.match(/^\w/) || f.first.value.match(/\d/)) //checks for any word entry at beginning of line or any digit in the field
    			{	
    				showerr("fn1");
    			}
    			
    			if(!f.last.value.match(/^\w/) || f.last.value.match(/\d/)) //checks for any word entry at beginning of line or any digit in the field
    			{
    				showerr("ln1");
    			}
    			
    			if(!f.phone.value.match(/^\d{3}[-]\d{3}[-]\d{4}/))
    			{
    				showerr("ph1");
    			}
    		 return false
    		}
    		document.myform.onsubmit =
    		(
    			function() 
    			{
    			  return validate(this)	  
    			}
    			
    		);
        }
    	);
    	
        //]]>
        </script>
      </head>
      <body>
    	<form name="myform">
    		<label id="lfn1" for="fn1">First Name:<br /></label>
    		<input type="text" id="fn1" name="first" /><br />
    		<label id="lln1" for="ln1">Last Name:<br /></label>
    		<input type="text" id="ln1" name="last" /><br />
    		<label id="lph1" for="ph1">Phone Number(111-222-3456):<br /></label>
    		<input type="text" id="ph1" name="phone" /><br />
    		Gender:<br />
    		<label for="chk1">Male</label>
    		<input type="checkbox" id="chk1" />&nbsp;
    		<label for="chk2">Female</label>
    		<input type="checkbox" id="chk2" />&nbsp;
    		<label for="chk3">Identity Crisis</label>
    		<input type="checkbox" id="chk3" />&nbsp;
    		<br /><br />
    		<input type="submit" name="submit" value="SUBMIT" id="" />
        </form>
      </body>
    </html>
    Jim L.
    Student, Husband, Uncle, oh..and Web Developer.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Cascus View Post
    Sorry, I am not sure I understand how to re-set the background-color before validation.
    What he means is that each time you validate, before the validation occurs you should first remove from the screen all of the error messages that may exist from previous validations.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    None of those function bodies need to be inside the onload handler, but it makes no difference.
    You know already how to set the background attribute, so just do it whenever the validate function is called.To restore a default CSS value, assign an empty string. Here's a low-maintenance method:
    Code:
    function resetFieldBackgrounds( f )
    {
     var fe = f.elements;
     
     for( var i = 0, len = fe.length; i < len; i++ )
      if( fe[ i ].nodeName == 'INPUT' )
       fe[ i ].style.backgroundColor = "";   
    }
    
    function validate(f)
    {
       resetFieldBackgrounds( f );
      ...............
    BTW your number validation is incorrect because the hyphen has a special use within [], so either escape the hyphen \- and/or just don't use [].
    Tab-indentation is a crime against humanity.

  6. #6
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thank you so much for all your help everyone. Here is the final code snip. I tested on IE 8 and Firefox, all looks good.

    And thanks for reminding me to double check my RegExp in the Regex tool. DUH lol. You would think I would know that by now.

    Here is where I have it running:
    http://school.leethfamily.net/ctec12...hw5/hw5-1.html

    Code:
        <script type="text/javascript" language="javascript">
    //<![CDATA[
    	function resetbckgrnds(f)
    	{
    		var fe = f.elements; //form elements
    		
    		for( var i = 0, len = fe.length; i < len; i++ )
    		{
    			if( fe[i].nodeName == 'INPUT' )
    			{
    				fe[i].style.backgroundColor = "";
    			}
    		}
    		
    		document.getElementById("gender").setAttribute("style", "color:#000000");
    
    	}
    	function validate()
    	{
    		
    		//Validate First Name
    		if (document.myform.first.value.match(/^\s*$/) || document.myform.first.value.match(/^\d/)) //checks for any word entry at beginning of line or any digit in the field
    		{	
    			document.getElementById("fn1").style.backgroundColor = "#ff0000";
    		}
    		//Validate Last Name
    		if (document.myform.last.value.match(/^\s*$/) || document.myform.last.value.match(/^\d/)) //checks for any word entry at beginning of line or any digit in the field
    		{
    			document.getElementById("ln1").style.backgroundColor = "#ff0000";
    		}
    		//Validate Phone Number
    		if (!document.myform.phone.value.match(/^\d{3}-\d{3}-\d{4}$/))
    		{
    			document.getElementById("ph1").style.backgroundColor = "#ff0000";
    		}
    		//Validate Check Boxes
    		
    		if (!document.myform.chk1.checked && !document.myform.chk2.checked && !document.myform.chk3.checked)
    		{
    			document.getElementById("gender").style.color = "#ff0000";
    		}
    
    	return false;
    
    	}
    
    	window.onload = (function()
        {
    		document.myform.first.focus();
    		document.myform.onsubmit = 
    		(
    			function()
    			{
    				resetbckgrnds(this);
    				validate();
    				return false;
    			}
    			
    		);
        });
    	
        //]]>
        </script>
      </head>
      <body>
    	<form name="myform" action="#" id="myform">
    		<label id="lfn1" for="fn1" >First Name:<br /></label>
    		<input type="text" id="fn1" value="" name="first" /><br />
    		<label id="lln1" for="ln1">Last Name:<br /></label>
    		<input type="text" id="ln1" value="" name="last" /><br />
    		<label id="lph1" for="ph1">Phone Number(111-222-3456):<br /></label>
    		<input type="text" id="ph1" value="" name="phone" /><br />
    		<br />
    		<label id="gender" name="gender">Please check your Gender:</label><br />
    		<input type="checkbox" id="chk1" name="chk1" value="1" />Male<br />
    		<input type="checkbox" id="chk2" name="chk2" value="2" />Female<br />
    		<input type="checkbox" id="chk3" name="chk3" value="3" />Identity Crisis<br />
    		<br /><br />
    		<input type="submit" value="SUBMIT" />
        </form>
      </body>
    Jim L.
    Student, Husband, Uncle, oh..and Web Developer.


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
  •