Save on Delicious

Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)

Posted on by Wordpress API

Sponsors

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.
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 recomend 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.

Incoming search terms:

You may like following Articles!

This entry was posted in JavaScript, Open source and tagged , by Wordpress API. Bookmark the permalink.

About Wordpress API

API means Application Program interface. In Wordpress API we are giving all the information about wordpress API. We worked for many wordpress plugins and themes. We have expertise in PHP, Databases, Graphic Design, Ruby on Rails, Java, Wordpress, Drupal and many CMS. We always give you the best solutions about wordpress and other related topics in This Blog. We will give you always fresh tips and tricks and techniques about wordpress in this blog.

76 thoughts on “Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)”

  4. I want you to know, your writing goes to the nerve of the issue. Your pellucidity leaves me wanting to know more. I am going to immediately grab your feed to keep up to date with your site. Sounding Out thanks is simply my little way of saying what a masterpiece for a fantastic resource. Let In my dearest wishes for your future post.

    Reply ↓

  13. Hey, found your site by accident doing a search on Google but I’ll definitely be coming back. – He that is of the opinion money will do everything may well be suspected of doing everything for money. – Benjamin Franklin 1706 – 1790

    Reply ↓

  14. Hey, that was without a doubt an interesting article. I had actually been looking for a photo printing related blog for a while now. Great! I have a similar blog, how much do you charge for advertising? because I can’t seem to find the information anywhere.

    Reply ↓

  17. This is a good write-up, I was wondering if I could use this piece on my website, I will link it back to your website though. If this is a problem please let me know and I will take it down right away.

    Reply ↓

  19. Great discussion. And I REALLY like that you practice what you preach. That’s when you can tell a post has come together.
    And I’m also fascinated by how fresh you made the routine [admit it: what you just shared has been regurgitated millions of time. ;-) ].
    Ben Johnson said people don’t need taught as much as they need reminding.
    Good work.

    Reply ↓

  22. hi it is my first post on this blog and to start with I would like to thank you for the great information, which I were able to find in this and all previous topics , it really helped me a lot. I will definitely add this website on my rss reader :) Also, I would like to ask – don’t you mind if I will quate some information from your blog since I am writing articles for the Bukisa, Ezine and other articles directories (this is my part time job)? It would really help me with some of mine articles. Of course, I will mention your website title or URL (not all articles directories allows URL’s , so I can’t 100% promise that you will get a direct backlink to your blog).

    Reply ↓

  24. This is a superb blog, I found your website researching bing for a similar theme and came to this. I couldnt find to much additional information on this write-up, so it was wonderful to find this one. I will probably end up being back again to check out some other posts that you have another time.

    Reply ↓

  29. Hey – perceptive blog, reasonable looking yon some blogs, seems a fair amicable stage you are using. I’m currently using WordPress with a view a two of my sites but looking to convert equal of them over to a platform correspond to to yours as a trial run. Anything in particular you would counsel about it?

    Reply ↓

  32. You own a very interesting blog covering lots of topics I am interested as well.Just bookmarked your blog to continue reading in the next days… Please continue your marvellous work

    Reply ↓

  35. I must say that it’s a very interesting article. I get a lot of knowledge from here. Beside that, your blog is so popular among the searchers from search engines. It means yours is great!

    Reply ↓

  57. I just wanted to comment and say that I really enjoyed reading your blog post here. It was very informative and I also digg the way you write! Keep it up and I’ll be back to read more in the future

    Reply ↓

  66. I love your website! did you generate this your self or did you outsource it? Im trying to find a blog design thats comparable so thats the only reason I’m asking. Either way maintain up the good work I was impressed with your content really..

    Reply ↓

  67. Hi, When I add a web-page to my Favorites in IE8, it is added end of it of the already established list. I will sort them by name*manually. But I’d like IE8 to try this automatically. Is this done ? Thanks

    Reply ↓

  68. Hi. I wanted to thank you for the good facts you’ve posted on your website. I will definitelycome back to check it out again and have subscribedto your RSS feed. Have an excellent day.

    Reply ↓

  69. Hi, truly love the design of one’s website. Would you mind telling me what theme you happen to be utilizing? I’m new to this and I’m hoping to obtain mine searching anywhere near as cool as yours. Thanks a great deal.

    Reply ↓

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>