Pure Javascript form Validation Script now easy

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.

01<script type="text/javascript">
02// Set maxlength value for your required fields
03var maxlength = 255;
04/*
05* You can pass three parameters this function
06* Example : ValidateRequiredField(phone,"Telephone must be filled out!", "number");
07* For string format no need to pass any strFormat.
08*/
09function ValidateRequiredField(field,alerttxt,strFormat) {
10with (field) {
11if (value == null|| value == "") {
12field.style.background= "grey";
13alert(alerttxt);return false;
14} else if (value.length > maxlength ) {
15field.style.background= "grey";
16alert('Maxlenth should be not more than 255 charactor');return false;
17} else if (strFormat == 'number' && isNaN(value) ) {
18field.style.background= "grey";
19alert(field.name + ' is not a number, Please put in Numric format');return false;
20} else {return true;}
21}
22}
23 
24/*
25* Using the function you can validate the email functions
26* Example: ValidateEmailAddress(email,"Email is not in Valid format!")
27* Return true or false
28*/
29function ValidateEmailAddress(field, alerttxt) {
30with (field) {
31apos=value.indexOf("@");
32dotpos=value.lastIndexOf(".");
33if (apos < 1 || dotpos-apos < 2)
34{alert(alerttxt);return false;}
35else {return true;}
36}
37}
38 
39/*
40* Using the function you can validate the checkbox in the form
41* Example: ValidateCheckBox(agreement,"Agreement is not checked!")
42* Return true or false
43*/
44function ValidateCheckBox(field,alerttxt) {
45with (field) {
46if (!field.checked == 1) {
47alert(alerttxt);return false;
48} else {return true;}
49}
50}
51 
52/*
53* Using the function you can validate the checkbox in the form
54* Example: ValidateRequiredField(website,"Website name is required!")
55* Return true or false
56*/
57function ValidateWebAddress(field,alerttext) {
58with(field) {
59 
60var companyUrl = value;
61 
62var 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})*)?$/;
63 
64if(RegExp.test(companyUrl)) {
65return true;
66} else {
67alert(alerttext);
68return false;
69}
70}
71}
72 
73function ValidateCompleteForm(thisform) {
74with (thisform) {
75 
76if (ValidateRequiredField(full_name,"First name is required!")== false) {full_name.focus();return false;}
77 
78if (ValidateRequiredField(email_address,"Email must be filled out!")== false) {email_address.focus();return false;}
79 
80if (ValidateEmailAddress(email_address,"Email is not in Valid format!")== false) {email_address.focus();return false;}
81 
82if (ValidateRequiredField(website_name,"Website name is required!")== false) {website_name.focus();return false;}
83 
84if (ValidateWebAddress(website,"Website Address is not incorrect format!")== false) {agreement.focus();return false;}
85 
86if (ValidateRequiredField(mobile,"Mobile must be filled out!", "number")== false) {phone.focus();return false;}
87 
88if (ValidateCheckBox(sex,"sex is not checked!")== false) {sex.focus();return false;}
89 
90}
91}
92</script>

And in you body where you are using the form just add the onsubmit=”return ValidateCompleteForm(this)” words in Form tag.

Exmaple:

`1`	`<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.

Pure Javascript form Validation Script now easy

Pure Javascript form Validation Script

Published by

Purab

Leave a Reply Cancel reply

Pure Javascript form Validation Script

Share Article:

Published by

Purab

Leave a Reply Cancel reply