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


Comments on this entry are closed.

  • hey fren , i am having the same issue as you faced…
    somebody pls help !!

  • Hello sir,
    I user your gen_validatorv4.js file in my project. its work good but when i use in IE that time POPUP box title in TITLE BAR is WINDOWS INTERNET EXPLORER or MICROSOFT INTERNET EXPLORER. so i want to change that please see me where i want to change in this your file

    Thank you

    Vipul Patel

  • hi
    in my case, it works for me when in the case to display msg on page itself but for some reason it doesn’t work when i want to display the error msg next to the input field, it doesn;t take the second parameter i.e the name
    eg.{myform}_{errorloc} wokrs
    but {myform}_{name}_{errorloc} doesnt work…the name field is the name of my input field isn’t it?
    can anyone explain me why please, that would be a great help,
    Thanks in advance

    • sorry i forgot to use the pageerror function, i was only using the singleboxerrro func,
      stupid me, sorry to bother u guys,
      cheers

  • Wonderful script, however I’m having a minor problem. My form is using ajax (post) to send the data to another php file, but the submit function is overwritten by the validation. I try using the click function $(“#ObjectName”).click( function() {, but it still doest work. How do I do a test to see if validation was successful and base on it send the data to the other form. Any help will be greatly appreciated..

  • How can I get a message to pop up if the form is submitted correctly in conjunction with this validator??

  • Hi,

    Is there a way to change the title of popup where it displays error messages?

    Currently it says “The page at says:”.

    Can it be changed to something else like “Please rectify the following errors”…?

  • Love the script, but I have 1 question or request. Is it posible to change the css of the input field when there is a error? For the usability it would be a gr8 extra!

    So is it already posible or is it simple to addon?

    Regards
    Vincent

  • Hello,

    Below you will see the error message I am getting when the page first loads.

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.6; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; InfoPath.3)
    Timestamp: Mon, 23 May 2011 19:20:07 UTC

    Message: ‘length’ is null or not an object
    Line: 201
    Char: 5
    Code: 0
    URI: http://localhost:8500/cfprojects/guarantytrust/js/gen_validatorv4.js

    • looks like you applied a validation meant for items like listbox or checkbox group to a single item

  • for check captcha any solution?

  • If I open my form page I get the message over my form:
    Error: couldnot get Form object “with my form name” OK
    If I give OK I can fill in the form but the error message is in EE not on the page.
    I use this Script with Freeform 2.7.2 in ExpressionEngine doesn’t that work?
    I wrote some forms but I hate the errorpage of EE, why isn’t it standard to do the errormessage in the form itself. I tried several jquiry en java solutions but I faill to get them right. I hope some one can help me with this one
    Please
    Thanks

  • thanks a lot,this script works magically!!

  • Thanks for the script.

    I am struggling a bit to customise it. What I am trying to achieve is to test the email if it is a “role” address and then reject it and ask for another email address.

    So if “info@xyz.com” or “support@xyz.com” or “postmaster@xyz.com” are entered, the info, support and postmaster will fail the validation.

    Sorry for me being a noob at this, I’m learning …

    Where should I tinker with the script please? Thanks

    • please see custom validation function

  • Thank you for sharing this great tool!
    It is probably very simple!, but for some reason I can’t get an “if/else” principal to work with the validation.
    I have a form containing a list of radio buttons. I principal I would prefer to have my user to fill out all of them but, some might have got reasons to leave on blank – I will then ask them to confirm that the missing radio-buttons are indented. I have therefore provided the site with at checkbox in the bottom of the page.
    I would therefore like at validation first checking whether this checkbox has been filled out before validation each radio bottom.
    if (VWZ_IsChecked(document.forms[‘myform’].elements[‘objektname’],”)) {
    frmvalidator.addValidation(“objektname”,”selone”,”message”);
    }
    else
    {
    return true;
    }
    Can anyone suggest a solution for this problem?

    • If a validation is added in a custom validation function, it won’t help because custom validation function is executed after all validations are run.
      Try conditional validations

  • my validation is “^(?=(?:\d*\D){1}\d*\s*$)[#*\d]{7}\s*$”
    i am not ok with build in java script.
    how should i do?
    pls reply to me.

  • I’ve run into a couple of bugs when using the following settings;

    frmvalidator.EnableOnPageErrorDisplay();
    frmvalidator.EnableMsgsTogether();

    Where or who can I submit my example code to that demonstrates these bugs?

    • please send to info (at) javascript-coder.com

  • Thank you for your beautiful script. any can you upgrade for ajax or jquery to check validation on blur..Do you have a script for server side in php.
    Thankyou once again

  • Me da un error en la linea 201.Me dice que length no es un objeto.Cual es la solución-Grcias

  • Hi,

    This code is great. However, can the custom validations accept parameters? Because I am trying to customize the methods to fit my pages.

  • Hi,
    I am trying to error msg next to the select tag (drop down) list with this code:

    Select One
    …..
    ..
    frmvalidator.addValidation(“country”,”dontselect=001″,”Please Select your Country”);

    but It is not showing any error msg next to the input box
    and except this all msgs are shown.

    now what should I do to show the msg??

    Thanx..:)

    • use a hidden field. do it thru ajax

  • Script is fantastic…only problem I see is if I have to validate a page AJAXly or if my button is of type “Button” and not of type “submit” the script doesnt work… any thoughts on this? thanks