javascript-form-validation

Hello guys ,

Today I am posting the java script from -validation

I know in your mind have lot of question regarding validation so we will cover all these topics in form validation

  1. JavaScript Form Validation Example
  2. Retype Password Validation JavaScript
  3. JavaScript Number Validation
  4. JavaScript email validation

These all validation i will describe you Step by Step –

1. JavaScript Form Validation Example

It is important to validate the form submitted by the user because.So, validation is must to authenticate user.

JavaScript, we can validate name, password, email, date, mobile numbers and more fields.

This validation for NAME AND PASSWORD

Example

<html>
<body>
<script>  
function validateform(){  
var name=document.myform.name.value;  
var password=document.myform.password.value;  
  
if (name==null || name==""){  
  alert("Name can't be blank");  
  return false;  
}else if(password.length<6){  
  alert("Password must be at least 6 characters long.");  
  return false;  
  }  
}  
</script>  
<body>  
<form name="myform" method="post" action="login.php" onsubmit="return validateform()" >  
Name: <input type="text" name="name"><br/>  
Password: <input type="password" name="password"><br/>  
<input type="submit" value="register">  
</form>  
</body>
</html>

Output- here you will write your name and password or password should be 6 digits

here i enter the name and password but here here you can see the password have a 4 digit it will give you a error or alert(Password must be at least 6 characters long.)

I show you the error

This error will show when you enter less then 6 digit

So you have to enter the 6 digit password and then ragister .

2. JavaScript Retype Password Validation

here i am covering the password and confirm password validation

which menace your first password and the confirm password should be same

If password and confirm password not same it will give you error that your password not same

Example

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;

if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
</head>
<body>

<form name="f1" action="filename.php" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>

</body>
</html>

 

Output– here you have to enter your password

Here i enter the password but the first password have 6 digit and the reenter password is 5 digit so it will give you error like this –

This is the error password much be same

3.JavaScript Number Validation

Here We will validate numeric value only by using isNaN() function.

<!DOCTYPE html>
<html>
<head>
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
  document.getElementById("numloc").innerHTML="Enter Numeric value only";
  return false;
}else{
  return true;
  }
}
</script>
</head>

<body>
<form name="myform" action="" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>

</body>
</html>

Example- here you will enter the number ,the basic concept for mobile mumber

here I enter the Alphabet ,here you can see the error Enter Numeric value only

SO YOU HAVE TO ENTER ONLY NUMERIC VALUE

4. JavaScript email validation

Here we will cover the email validation where the email validation @ is necessary and ( . )

is necessary so let’s start

Example

<html>
<body>
<script>  
function validateemail()  
{  
var x=document.myform.email.value;  
var atposition=x.indexOf("@");  
var dotposition=x.lastIndexOf(".");  
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){  
  alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);  
  return false;  
  }  
}  
</script>  
<body>  
<form name="myform"  method="post" action="filename.php" onsubmit="return validateemail();">  
Email: <input type="text" name="email"><br/>  
  
<input type="submit" value="register">  
</form>  
</body>
</html>

Output– here you write your email address

here i show you the error when you enter email address is wrong

This is the email address without @ this it will give you error

So you have to enter valid email address

I hope you are satisfied with this validation chapter

Leave a Comment

Show Buttons
Hide Buttons