JavaScript Form Validation Script: More features

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:

Create a place on the page for displaying the errors 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>

Enable on-page error display 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:

Create a place to display the error message next to the input elements 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" />

call EnableOnPageErrorDisplay()

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