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();
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
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.
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
See Also
- JavaScript Form Validation : quick and easy!
- Simfatic Forms Validation: save your time coding
- Javascript validation simple example code
- How to Use the Dreamweaver Form Validation Feature
- How to Submit a Form Using JavaScript
- How to get the value of a form element : Drop downs and lists
- How to get the value of a form element : check box and radio button
- How to get the value of a form element using JavaScript
- Using JavaScript to access form objects when there are multiple forms
- Using JavaScript to reset or clear a form