Web developer comes in sitution of checking forms with simple javascript. Use following Pure Javascript form Validation Script make your life easy.
Many times we come to same problem which we faced so many times. But still when Web developer comes in sitution of checking forms with simple javascript. Use following Pure Javascript form Validation Script make your life easy.
Pure Javascript form Validation Script
He started looking into some solutions. Some people try to use the some third party JS library like (Mootools, Jquery, lightbox, Prototype and etc…)
I recommend not to use these JS library because these library will take some brandwidth of your website. Most of the code these JS library is useless or un useful to your website.
Still you are adding these JS library to your website.
In this article I will show you very easy technique to the javascript form validations with minium code.
Just copy paste the following code in to your head section first.
<script type="text/javascript">
// Set maxlength value for your required fields
var maxlength = 255;
/*
* You can pass three parameters this function
* Example : ValidateRequiredField(phone,"Telephone must be filled out!", "number");
* For string format no need to pass any strFormat.
*/
function ValidateRequiredField(field,alerttxt,strFormat) {
with (field) {
if (value == null|| value == "") {
field.style.background= "grey";
alert(alerttxt);return false;
} else if (value.length > maxlength ) {
field.style.background= "grey";
alert('Maxlenth should be not more than 255 charactor');return false;
} else if (strFormat == 'number' && isNaN(value) ) {
field.style.background= "grey";
alert(field.name + ' is not a number, Please put in Numric format');return false;
} else {return true;}
}
}
/*
* Using the function you can validate the email functions
* Example: ValidateEmailAddress(email,"Email is not in Valid format!")
* Return true or false
*/
function ValidateEmailAddress(field, alerttxt) {
with (field) {
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos < 1 || dotpos-apos < 2)
{alert(alerttxt);return false;}
else {return true;}
}
}
/*
* Using the function you can validate the checkbox in the form
* Example: ValidateCheckBox(agreement,"Agreement is not checked!")
* Return true or false
*/
function ValidateCheckBox(field,alerttxt) {
with (field) {
if (!field.checked == 1) {
alert(alerttxt);return false;
} else {return true;}
}
}
/*
* Using the function you can validate the checkbox in the form
* Example: ValidateRequiredField(website,"Website name is required!")
* Return true or false
*/
function ValidateWebAddress(field,alerttext) {
with(field) {
var companyUrl = value;
var RegExp = /^(([\w]+:)?\/\/)?(([\d\w]|%[a-fA-f\d]{2,2})+(:([\d\w]|%[a-fA-f\d]{2,2})+)?@)?([\d\w][-\d\w]{0,253}[\d\w]\.)+[\w]{2,4}(:[\d]+)?(\/([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)*(\?(&?([-+_~.\d\w]|%[a-fA-f\d]{2,2})=?)*)?(#([-+_~.\d\w]|%[a-fA-f\d]{2,2})*)?$/;
if(RegExp.test(companyUrl)) {
return true;
} else {
alert(alerttext);
return false;
}
}
}
function ValidateCompleteForm(thisform) {
with (thisform) {
if (ValidateRequiredField(full_name,"First name is required!")== false) {full_name.focus();return false;}
if (ValidateRequiredField(email_address,"Email must be filled out!")== false) {email_address.focus();return false;}
if (ValidateEmailAddress(email_address,"Email is not in Valid format!")== false) {email_address.focus();return false;}
if (ValidateRequiredField(website_name,"Website name is required!")== false) {website_name.focus();return false;}
if (ValidateWebAddress(website,"Website Address is not incorrect format!")== false) {agreement.focus();return false;}
if (ValidateRequiredField(mobile,"Mobile must be filled out!", "number")== false) {phone.focus();return false;}
if (ValidateCheckBox(sex,"sex is not checked!")== false) {sex.focus();return false;}
}
}
</script>
And in you body where you are using the form just add the onsubmit=”return ValidateCompleteForm(this)” words in Form tag.
Exmaple:
<form action="submit.php" onsubmit="return ValidateCompleteForm(this)" method="post" >
Note: you can change the parameter as per your form fields names. Maxlength I kept 255 you can change this value as per your requirment.
Still if you have any doubts about this function please ask me.
