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

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

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>

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

Here are the steps:

1. 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" />

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

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!

• 

Related posts:

1. JavaScript Form Validation : quick and easy!
2. Simfatic Forms Validation: save your time coding
3. How to Submit a Form Using JavaScript
4. How to switch the 'action' field in an HTML form dynamically
5. Using JavaScript to access form objects when there are multiple forms
6. How to make a web form
7. A Form Design Software that is Quick, Easy and Simple.
8. How to make a web form and get it online quickly
9. The HTML Form Tag
10. From an HTML Form to an Email Inbox
11. How to get the value of a form element using JavaScript
12. JavaScript Button
13. How to set the value of a form element using Javascript
14. The HTML Form Submit Button
15. Can JavaScript email a form?

Tagged as: download, javascript form validation, reference, validation