feature post
Lists

Form Validation using JavaScript

Form validation is one of the most common tasks performed using JavaScript. You have likely come across forms on the Web that has shown you a prompt when you have not entered value into a field that requires one, or when you have entered the wrong kind of value; this is because the form has been validated.

That is, a script has checked to see whether the text you have entered or choices you have made match some rules that the programmer has written into the page.

For example, if you are expected to enter an email address, these validation rules may check what you entered to ensure that it contains an @ symbol and at least one period or full stop. These kinds of rules help ensure that the data provided by users meet the requirements of the application before being submitted.

When to Validate

Validation can happen in two places: in the browser using JavaScript, and on the server using one of several languages such as ASP.NET or PHP. In fact, applications that collect important information using a form (such as e-commerce orders) are usually validated both in the browser and on the server. You may wonder why forms are validated in the browser if they will only get checked again when they reach the server; the reason is that it helps the user enter the correct data required for the job without the form being sent to the server, being processed, and then being sent back again if there are any errors.

This has two key advantages: It ’ s quicker for the user because the form does not need to be sent to the server, processed, and returned to the user with any relevant error messages. It saves the load on the server because some errors will get caught before the form is submitted. It is very important to validate on the server because you cannot guarantee that the user has JavaScript enabled in his or her browser, and if a user entered a wrong value into a database or other program it could prevent the entire application from running properly.

What You Can Check For

When it comes to validating a form you cannot always check whether users have given you the correct information, but you can check whether they have given you some information in the correct format. For example, you cannot ensure that the user has entered his or her correct phone number; the user could be entering anyone ’ s phone number, but you can check that it ’ s a number rather than letters or other characters, and you can check that the number contains a minimum number of digits. As another example, you can ’ t ensure someone has entered a real email address rather than a false address, but you can check that whatever was entered followed the general structure of an email address (including an @ sign and a period, and that it is at least seven characters long). So JavaScript form validation is a case of minimizing the possibility of user errors by validating form controls.

When it comes to forming controls that allow users to indicate their choice from a selection of options (such as checkboxes, drop-down select boxes, and radio buttons), you can use JavaScript to check that a user has selected one of the options (for example, to check that a user has checked the terms and conditions).

How to Check a Form

There are several ways in which you can check a form. Usually, when the user presses the submit button on a form, it triggers the onsubmit event handler on the   < form >   element, which in turn calls a validation function stored either in a separate script or in the head of the document. The function must then return true in order for the form to be sent, or, if an error is encountered, the function returns false and the user ’ s form will not be sent  —  at which point the form should indicate to the user where there is a problem with the information the user entered.

JavaScript Example

function validateForm() {
  var x = document.forms[“myForm”][“fname”].value;
  if (x == “”) {
    alert(“Name must be filled out”);
    return false;
  }
}

Implementation HTML

<form name=”myForm” action=”/action_page.php” onsubmit=”return validateForm()” method=”post”>
Name: <input type=”text” name=”fname”>
<input type=”submit” value=”Submit”>
</form>

 

 

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.