You are here: Home » JavaScript » JQuery JavaScript form validation

JQuery JavaScript form validation

45 Flares 45 Flares ×

For JQuey java script form validation. Call a function with event onclick, on form submit.
You can see it in PHP Registration Form.
Use a JQuery file.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>
function validate()
{
if(document.getElementById("name").value=='')
{
	 $("#name").css({"border": "1px solid red"});
	 document.regiform.name.focus();
     return false;
}
if(document.getElementById("email").value=='')
{
	 $("#email").css({"border": "1px solid red"});
	 document.regiform.email.focus();
     return false;
}

if(document.getElementById("email").value!='')
{
var em =document.getElementById('email').value;


if (echeck(em)==false){
		document.regiform.email.value="";
		document.regiform.email.focus();
		return false;


}
	}

if(document.getElementById("pass").value=='')
{
	 $("#pass").css({"border": "1px solid red"});
	 document.regiform.pass.focus();
     return false;
}

if(document.getElementById("repass").value=='')
{
	 $("#repass").css({"border": "1px solid red"});
	 document.regiform.repass.focus();
     return false;
}

if((document.getElementById("pass").value)!=(document.getElementById("repass").value))
{
	 $("#repass").css({"border": "1px solid red"});
	 document.regiform.repass.focus();
     return false;
}

if(document.getElementById("gender").value=='')
{
	 $("#gender").css({"border": "1px solid red"});
	 document.regiform.gender.focus();
     return false;
}

}
function echeck(str) {
var emailText = str;
    var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/;
    if (pattern.test(emailText)) {
        
    } else {
       
  return false;
    }

}
function removes(id){
	
 	$("#"+id).css({"border": "1px solid #BFBFBF"}); 
 }
</script>
</head>

If required field is blank, then its border will be red, with the help of CSS, like $(“#name”).css({“border”: “1px solid red”}); And set cursor at that filed with document.regiform.name.focus();
Here i am also using another function removes();, if change color of test filed, after validate.

About Abhishek Sinha

I am Abhishek and I love to code on PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top
45 Flares Twitter 8 Facebook 4 Google+ 4 StumbleUpon 12 Pin It Share 11 LinkedIn 6 45 Flares ×