Form Validation - onsubmit 2nd time

JavaScript
1

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?


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


	<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>
2

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/ctec126/homework/hw5/hw5-1.html



    <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>
3

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:


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 .

4

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.

5

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:


    <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>
6

Re-set the background-color before validation.

Also setAttribute for style does not work in IE

document.getElementById(elmnt).style.backgroundColor = "#ff0000";

Also note the change to camel-case for hyphenated properties.