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:

  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!

Comments on this entry are closed.

  • Emma

    I want do a validation for choosing value like this: frmvalidator.addValidation(“Country”,”dontselect=000″); but my drop down menu data from database. Can tell me how to do a validation for this option

  • Mukesh Kumar

    Hi All,
    Validation.js has really made my life easier. i would say it has saved my lot of time. Everythingis is fine in validation.js, but in one of my scenario i came up with a situation where i needed some flag on client side, to know where the validation is passed or not. like isValid property of asp.net validation. Any reply will be highly appreciated.

  • http://www.kidsplaychildcare.co.uk Kevin Cornish

    Hi, I use the script and works well, however i have a minor problem that is causing me a real headache… all I want is when the validation suceeds a message can be displayed either in the page or as a pop up to confirm that the details have been accepted and passed to the server… it’s along and boring story why i need that but it would be very much appreciated. Thank you!

    • prasanth

      on the server side script, You can redirect to a page after processing the form

  • Art

    I am using the validation JS on a website where html pages are generated via php. I have one page that checks for a radio button to be pushed, form id update, and then another page is generated that doe snot have the update form. The validation works in the initial page but I get an error alert, “Error: couldnot get Form object Update”. Is there a way to destroy the object that was created for the initial form?

    • Art

      I found my logic error.

    • prasanth

      As far as Javascript is concerned, each page is separate. “couldnot get Form object’ means either you don’t have the form tag itself or the form name is different

  • Art

    This is a great addition to my tool set!

  • Lisa Rose

    hi, this has to a blind error, I am sure but I am the blind one.

    here is the validation code:

    var frmvalidator = new Validator(“shoutit”);
    frmvalidator.addValidation(“first_name”,”req”,”Please enter your First Name”);
    frmvalidator.addValidation(“first_name”,”maxlen=20″, “Max length for First Name is 20″);
    frmvalidator.addValidation(“last_name”,”req”);
    frmvalidator.addValidation(“last_name”,”maxlen=40″, “Max length for Last Name is 40″);
    frmvalidator.addValidation(“email”,”maxlen=50″);
    frmvalidator.addValidation(“email”,”req”);
    frmvalidator.addValidation(“email”,”email”);

    the error is: Validator not defined. It’s defined right there, first line. Looked thru the rest can’t see anything else. Help?

    Thanks!

    • Lisa Rose

      scratch that last comment. i found it. knew it was a blind error!

      l;o)

    • prasanth

      need to include the gen_validatorv4.js file. follow the instructions in the first page.

  • codrut

    in case of VWZ_IsChecked – how could it check against any value of radio buttons group – not a specified one?

  • Jon Laurie

    Fantastic. Thanks so much.

  • Serkan

    Hi to all

    I could not to run your Conditional Validations can u help me please look my codes

    frmvalidator.addValidation(“rentdur”,”req”,”Please fill-in this textbox”,”VWZ_IsChecked(document.forms[‘reserve’].elements[‘service’],’bike’)”);
    frmvalidator.addValidation(“rentime”,”req”,”Please fill-in this textbox”,”VWZ_IsChecked(document.forms[‘reserve’].elements[‘service’],’bike’)”);

    where is my mistake….

    • prasanth

      Install Firebug. Then try the page in Firefox. That will help you find the problem

  • johnyboy

    Is there a parameter which can be added to the validation code for alphanumeric or
    alnum which would include the ‘-‘ (hyphen) character. This would be useful for hyphenated names like Smith-Klein.

  • http://shopaz.org jake

    hey, i have set the java script to show up error messages next to the input element, now i am wondering how to change the font color and style of the error display text.
    thanks for the script.

  • claud

    Best way is to start by saying “please” or end by saying “thank you”.

  • Kyle Hobson

    Is there away to use condition code like this

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

    With out these ‘ quotes? Because they interfere with my PHP code.

  • Kyle

    How do I allow numeric and symbols like – but not allow alpha at the same time?

    • Leon

      you could use regular expression.