You are here: Home » All Posts » HTML Forms » JavaScript Form Validation Script: More features

JavaScript Form Validation Script: More features

in HTML Forms

This is in continuation of the JavaScript Form Validation script in this page. In this page, we will see some of the advanced features of the script.

Showing all the form validation errors together in a message box

If you want to show all the error messages together, then just call the EnableMsgsTogether() function as shown below.

frmvalidator.EnableMsgsTogether();


Form validation messages in single message box

See the form validation demo

Showing the form validation errors on the page itself

You can display the validation errors on the page itself.

Here are the steps:

  1. Create a place on the page for displaying the errors
  2. create a DIV on the page for the errors the DIV should be named as {formname}_errorloc
    where {formname} is the name of your form.
    Example:

    <div id='myform_errorloc' class='error_strings'></div>
    
  3. Enable on-page error display
  4. Call the EnableOnPageErrorDisplaySingleBox() function to enable on page error display.
    For example:

    frmvalidator.EnableOnPageErrorDisplaySingleBox();
    frmvalidator.EnableMsgsTogether();
    

See the form validation demo here

Showing the error messages next to the input element

Form validation error message
Here are the steps:

  1. Create a place to display the error message next to the input elements
  2. For example place a DIV next to the input element and have it ID of the format:
    {formname}_{inputname}_errorloc
    Example:

    <div id='myform_Name_errorloc' ></div>
    <input type="text" name="Name" />
    
  3. call EnableOnPageErrorDisplay()
  4. frmvalidator.EnableOnPageErrorDisplay();
    frmvalidator.EnableMsgsTogether();
    

Conditional Validations

Sometimes it may be required to validate certain fields only on certain conditions. For example, a textbox ‘Other’ needs to be filled only when ‘Other’ radio option is selected.

conditional validation
Here is how to add a condition to a validation:
There is an optional 4th parameter to the addValidation() function. If you pass a condition, that condition will be checked before running the validation.
Example:

frmvalidator.addValidation("hearabout_other","req","Please fill-in this textbox",
        "VWZ_IsChecked(document.forms['myform'].elements['hearabout'],'Other')");

VWZ_IsChecked() is a handy function included in gen_validatorv4.js script that can be used to check the ‘checked’ status of radio group or check box. The first parameter is the input object and the second parameter is the value.

If it is a drop down list, you can use the VWZ_IsListItemSelected() function

frmvalidator.addValidation("city_other","req","Please fill-in the city name",
        "VWZ_IsListItemSelected(document.forms['myform'].elements['city_list'],'Other')");

VWZ_IsListItemSelected(list_object, item_value)
The first parameter is the drop down list object and the second is the value of the item.

Triggering the validations when custom submitting the form

The validation script uses the form’s onsubmit event to trigger the validations. If you are submitting the form using code, for example on clicking a hyperlink, the onsubmit event is not triggered :

<a href='#' onClick="document.yourform.submit()">Submit Form</a>

You can trigger the validations by explicitly calling the form’s onsubmit like this:

<a href='#' onClick="if(document.yourform.onsubmit()){document.yourform.submit()}">Submit Form</a>

Making it a bit neater:

<a href="javascript: submitform()">Submit</a>
<script type="text/javascript">
function submitform()
{
    if(document.myform.onsubmit())
    {
        document.myform.submit();
    }
}
</script>

Next: Save your time coding forms and validations

Just Choose Validations!
Simfatic Forms is a feature-rich web form maker.
You just have to choose the validations. More info & downloads

Be Sociable, Share!
Reach out:

Prasanth Janardanan

Prasanth is the founder of Simfatic Solutions. He loves exploring Javascript possibilities and shares some great tips and some code here at Javascript-Coder.com.
Most of the time, Prasanth is busy adding features to Simfatic Forms - a desktop based Web Form Builder.
Reach out:

Latest posts by Prasanth Janardanan (see all)

Previous post:

Next post: