Sep 11 2009

Javascript Form Validation Before Submit

Validate inputs using javascript before submitting the formClient-side form validation with Javascript is easy to implement and convenient to use as it allows you to verify input fields before submitting the data to a server-side script. Using Javascript to check required form fields is important in avoiding spam, blank submissions and to help you maintain data consistency.

Learn how to validate input fields in HTML forms using a single Javascript function that highlights empty required fields before sending the content off to a PHP script, for example.

See Demo

Required Fields
The validateForm() function below contains a list of conditional statements that check the value of each specified input. If a required field is empty, the CSS class for that input will change to highlight the field in red, then the variable “error” which begins as false, will be set to true to prevent form submission until all required fields are satisfied. Highlighted fields that have been filled out will return to the default CSS class upon re-validating the form. The function below also checks the general syntax of an email address. The input data must contain the @ symbol and a dot (.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function validateForm() {
    var input = document.myForm;    // Your form name
    var error = false;              // No erros by default
   
    // Restore CSS classes to the default so that when the form is re-checked the UI updates
    input.inquiry.className = input.name.className = input.email.className = input.message.className = '';
    document.getElementById('inquiryLabel').className = document.getElementById('nameLabel').className =
    document.getElementById('emailLabel').className   = document.getElementById('messageLabel').className = 'label';
   
    if(input.inquiry.value == 'null') {
        input.inquiry.className = 'inputError';
        document.getElementById('inquiryLabel').className = 'errorLabel';
        input.inquiry.focus();
        error = true;
    }
   
    if(input.name.value == '') {
        input.name.className = 'inputError';
        document.getElementById('nameLabel').className = 'errorLabel';
        input.name.focus();
        error = true;
    }
   
    if(input.email.value.indexOf("@") > 0 && input.email.value.indexOf(".") > 2) {
        // Email address seems well formed
    }
   
    else {
        input.email.className = 'inputError';
        document.getElementById('emailLabel').className = 'errorLabel';
        input.email.focus();
        error = true;
    }
   
    if(input.message.value == '') {
        input.message.className = 'inputError';
        document.getElementById('messageLabel').className = 'errorLabel';
        input.message.focus();
        error = true;
    }
   
    // Submit form if after validation error = false
    if(!error) {
        document.myForm.submit();
    }
  }



Styling
The CSS classes are very simple and use the color red to highlight empty input fields.

1
2
3
4
5
6
7
8
9
10
11
12
13
.label {
    color:#000000;
 }
 
 .errorLabel {
    color:#FF0000;
    font-weight:bold;
 }
 
 .inputError {
    border:1px #FF0000 solid;
    background-color:#FFDDDD;
 }



HTML Form
The form below contains commonly used input types including text, textarea and select.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<form id="myForm" name="myForm" method="post" action="test.php">
 <fieldset id="content">
  <legend><b>Javascript Form Validation</b></legend>
  <table width="100%" cellspacing="0" cellpadding="0" border="0">
   <tr>
    <td align="right"><span class="required-field">*</span> Required</td>
   </tr>
   <tr>
    <td>
     <span id="inquiryLabel" class="label">Inquiry Type</span>
     <br />
     <select id="inquiry" name="inquiry_type">
      <option value="null" selected>Select</option>
      <option value="1">Support</option>
      <option value="2">Get a Quote</option>
     </select><span class="required-field">*</span>
    </td>
   </tr>
   <tr>
    <td>
     <span id="nameLabel" class="label">Full Name:</span>
     <br />
     <input id="name" name="ull_name" type="text" size="30" /><span class="required-field">*</span>
    </td>
   </tr>
   <tr>
    <td>
     Website:
     <br />
     <input id="url" name="website" type="text" size="30" />
    </td>
   </tr>
   <tr>
    <td>
     <span id="emailLabel" class="label">Email address:</span>
     <br />
     <input id="email" name="email_address" type="text" size="30" /><span class="required-field">*</span>
    </td>
   </tr>
   <tr>
    <td>
     <span id="messageLabel" class="label">Message:</span>
     <br />
     <textarea id="message" name="email_message" rows="5" cols="40"></textarea><span class="required-field">*</span>
    </td>
   </tr>
   <tr>
    <td align="center">
     <br />
     <input id="submit" type="button" value="Submit" onclick="validateForm()" />
    </td>
   </tr>
  </table>
 </fieldset>
</form>

You will notice that the id tag for required fields is different from its name tag. Javascript utilizes the getDocumentById() method to manipulate the input’s CSS styling, however, your server-side script will use the name tag to process the data entered.

Sep 11th by Hektor

Leave a Reply