<!DOCTYPE html>
<html>
<head>
<title>JavaScript Form Input Validation</title>
<script type="text/javascript">
function isValidForm(f,container){
error=[];
if(!nameValidate(f.txtName.value)){
error.push("Invalid Name!");
}
if(!phoneValidate(f.txtPhone.value)){
error.push("Invalid phone number!");
}
if(!emailValidate(f.txtEmail.value)){
error.push("Invalid Email Address!");
}
if(!passwordValidate(f.pwdPassword.value,f.pwdRePassword.value,6)){
error.push("Invalid Password!");
}
if(error.length>0){
all_error="";
for(i=0;i<error.length;i++){
all_error+=error[i]+"<br/>";
}
tag=document.getElementById(container);
tag.innerHTML=all_error;
tag.style.color="red";
return false;
}
return true;
}
//---------------internal library functions---------------//
function nameValidate(name){
var patt=/^[a-zA-Z ]{3,}$/;
var result=patt.test(name);
return result;
}
function phoneValidate(phone){
var patt=/^[0-9]{8,}$/;
var result=patt.test(phone);
return result;
}
function passwordValidate(password,retype_password,len){
if((password.length===retype_password.length) && (password.length>=len)){
return true;
}else{
return false;
}
}
function emailValidate(email){
var patt=/^[a-zA-Z]+[.]?[a-zA-Z0-9]*[@][a-zA-Z]{2,}[.][a-zA-Z]{2,}$/;
var result=patt.test(email);
return result;
}
</script>
</head>
<body>
<form name="frmSignup" action="#" method="post" onsubmit="return isValidForm(this,'error')" style="width:400px; margin:0px auto;">
<div id="error"></div>
Name:<br/><input type="text" name="txtName" /><br/>
Phone:<br/><input type="text" name="txtPhone" /><br/>
Email:<br/><input type="text" name="txtEmail" /><br/>
Password:<br/><input type="password" name="pwdPassword" /><br/>
Retype Password:<br/><input type="password" name="pwdRePassword" /><br/>
<input type="submit" value="Submit" name="btnSubmit" />
</form>
</body>
</html>In this example you will find name, phone, email and password validation with custom function so that you can reuse it anywhere to your project with just coping these functions.
Validation with Regular Expression is the most effective way than others methods. Moreover, most of other languages like CSharp, PHP etc. support Regular Expression too.
sir, it is very big and too hard! is there any simple example to learn quickly like name,address,email,and phone and a submit button?
sorry, I forgot to thank you for your hardwork, THANK YOU VERY VERY MUCH!
To understand the above code you have to be experienced on RegExp, Dynamic Object Model (DOM), function, Array, Event handler in javaScript as well as HTML structure very well. If you don't know these topics you have to learn basic topic by topic first then you should understand.
@Boby: use line 83 to 90 for the email validation function and line 21 for the function call with out the "if condition" and to chk the output u may use alert() or colsole.log() , hope it will help u to find out the exact short code, for further development, use your imagination and development skill
pls don't forget to use a valid or invalid email as the parameter of function call at line 21 like, emailValidate('test@example.com'), though it is hard coding but it will help to make sense
DOM means Document Object Model as i know
ya i have mistaken the abbr. i was going to write Dynamic HTML and then Document Object Model. When i change my mind then i made it
Share
About Author
- Online Tips
- Programming
Comments 11