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

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 (.)

Javascript Function
Code:
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();
    }
  }
CSS Styling
The CSS classes are very simple and use the color red to highlight empty input fields.

Code:
.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.

Code:

 

  Javascript Form Validation
  

   

    * Required
   

   

    
     Inquiry Type
     
     *
    
   

   

    
     Full Name:
     
     *
    
   

   

    
     Website:
     
     
    
   

   

    
     Email address:
     
     *
    
   

   

    
     Message:
     
     *
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.


See Demo
Code:
http://www.hektorparis.com/hp-lab/javascript_form_validation/
Source HP