# Javascript Form Validation

**URL:** <https://forum.kirupa.com/t/javascript-form-validation/208449>\
**Category:** web dev\
**Created:** [November 28, 2006, 10:22pm UTC](https://forum.kirupa.com/t/javascript-form-validation/208449 "2006-11-28T22:22:34Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![g\_one](https://avatars.discourse-cdn.com/v4/letter/g/35a633/32.png) [@g\_one](https://forum.kirupa.com/u/g_one)\
**Post date:** [November 28, 2006, 10:22pm UTC](https://forum.kirupa.com/t/javascript-form-validation/208449/1 "2006-11-28T22:22:34Z")

</div>

So, It was working last night fine, and now it is not. I have tried to peice together an “onsubmit” function with two “onchange” functions in order to make sure that the feilds have been filled out correctly before submission. Here is the code:

> \<script language=“javascript” type=“text/javascript”\>  
> \<!–  
> function checkForm() {  
> name = document.getElementById(“name”).value;  
> email = document.getElementById(“email”).value;  
> comment = document.getElementById(“comments”).value;  
> if (name == “”) {  
> document.getElementById(“nameFeild”).style.display = “inline”;  
> document.getElementById(“name”).select();  
> document.getElementById(“name”).focus();  
> return false;  
> } else if (email == “”) {  
> document.getElementById(“emailFeild”).style.display = “inline”;  
> document.getElementById(“email”).select();  
> document.getElementById(“email”).focus();  
> return false;  
> } else if (comment == “”) {  
> document.getElementById(“commentFeild”).style.display = “inline”;  
> document.getElementById(“comments”).select();  
> document.getElementById(“comments”).focus();  
> return false;  
> }  
> return true;  
> }

function hideAllErrors() {  
document.getElementById(“nameFeild”).style.display = “none”  
document.getElementById(“emailFeild”).style.display = “none”  
document.getElementById(“commentFeild”).style.display = “none”  
}

function checkEmail (strng) {  
var error=“”;  
if (strng == “”) {  
document.getElementById(“emailFeild”).style.display = “inline”;  
}  
var emailFilter=/^.+@.+..{2,3}$/;  
if (!(emailFilter.test(strng))) {  
document.getElementById(“emailFeild”).style.display = “inline”;  
}  
else {  
//test email for illegal characters  
var illegalChars= /[()&lt;&gt;,;:\"]/  
if (strng.match(illegalChars)) {  
document.getElementById(“emailFeild”).style.display = “inline”;  
}  
}  
return error;  
}

function checkName (strng) {  
var error = “”;  
if (strng == “”) {  
document.getElementById(“nameFeild”).style.display = “inline”;  
}

```
var illegalChars = /\W/; // allow letters, numbers, and underscores
if ((strng.length &lt; 4) || (strng.length &gt; 10)) {

```

document.getElementById(“nameFeild”).style.display = “inline”;  
}  
else if (illegalChars.test(strng)) {  
document.getElementById(“nameFeild”).style.display = “inline”;  
}  
return error;  
}  
–\>  
\</script\>  
And here is my form:

> \<form onsubmit=“return checkForm();” method=“POST” action=“bio.html”\>

Name:\<br /\>  
\<input onchange=“checkName();” id=“name” type=“text” name=“name” size=“19” /\>  
\<div class=“error” id=“nameFeild”\>Error!\</div\>\<br /\>

Email:\<br /\>  
\<input onchange=“checkEmail();” id=“email” type=“text” name=“email” size=“19” /\>  
\<div class=“error” id=“emailFeild”\>Error!\</div\>\<br /\>

Comments:\<div class=“error” id=“commentFeild”\>Error!\</div\>\<br /\>  
\<textarea id=“comments” rows=“9” name=“comments” cols=“30”\>\</textarea\>

\<br /\>

\<input name=“Submit” type=“Image” onmouseover=“this.src=‘images2/SubmitRO.gif’” onmouseout=“this.src=‘images2/SubmitBTN.gif’” value=“submit” src=“images2/SubmitBTN.gif” /\>  
\</form\>  
Any Help would be greatly appreciated!

Thanks.

G