JavaScript validation can be quite tricky if you have never done it before, but this tutorial should make it easier. So what can you validate? You can use JavaScript as a presence check and a type check as well as checking for reasonable dates and email addresses. Please note that I used the word reasonable, rather than correct as the user can still enter an incorrect date or email address even if it is in the right format!
The Presence Check This check is used when you've got a form on your site and you want to make sure certain fields are filled in before it is submitted. The basic JavaScript required for this is:
| function validate_presence(field,errormessage) { with (field) { if (value==null||value=="") {alert(errormessage);return false} else {return true} } } |
This code basically tells your browser to check a certain field when the form is submitted. If it is empty, then it will show an error message. If not, then it will let the browser submit the form. The above code can be used for all the fields in your form, as you simply add the JavaScript for each field. For example:
| function validate_presence(field,errormessage) { with (field) { if (value==null||value=="") {alert(errormessage);return false} else {return true} } } function validate_form(thisform) { with (thisform) { if (validate_presence(name,"You must enter your name!")==false) {name.focus();return false} if (validate_presence(email,"You must enter your email address!")==false) {email.focus();return false} } } |
And how do you link your form to this JavaScript? You simply add the following code to your <form> tag:
| onSubmit="return validate_form(this)" |
I will write some more tutorials on JavaScript validation soon.
Related Articles
- Why is Validation Important?Validation in your webpages is very important as proven in this tutorial. In this tutorial youll learn about Validation and how you should be making the effort to get validated!
- PHP:Form Series: Validators & Client-side ValidationThis tutorial is really helpful to those of us who are a little intimidated by PHP:form. All of those hard to answer questions are easily explained in this simple to use educational web page. Hope you enjoy!
- Form Validation using PHPToday Ill take it up a level and re-write that script using the if, else conditional and empty() function to include form validation.
- HTML Forms Validation On The Client SideForm validation on the client-side is essential - it saves time and bandwidth; you also have better control to show the user the wrong field. This comparison of different validation methods includes comments for improving portability and maintainability.
- CSS Validation and HTMLHTML validation and CSS validation are controversial issues with some people. This article discusses some of the issues that have come increasingly to the fore in web development. The article will also provide a practical method that overworked webmasters can use to improve their website.
- Why do you Need a Validated Website?This is a very good article for new designers or designers who are big on the visuals but not the programming. Why do you Need a Validated Website? - the author explains it really well.
- Code Validation & Compliancy - The New Beginning XHTMLCode validation is still widely debated as to whether it is required for performance within the search engines. It is only a guess that the search engines dont utilise it within their algorithm, but nobody is actually 100% sure on that fact...
- 7 Benefits of HTML ValidationYou may not bother with html validation or writing simple and clean code when designing your web site. Later you may find your site is slow loading, appears incorrectly in the main browsers and does not rank well for the major search engines...
- E-mail Validation with PHPWhen you register on at a website, the site normally checks if the e-mail address that you enter is in a valid format. This is done by using what called a Regular Expression. What we need to do is check if a string (eg $email) match...
- What does W3C Validation Stand For?This article will explain this to you if your website is W3C Validated and what W3C stands for and means.
