Display a single validation message for multiple controls using jquery validation plugin

Question

I am using jquery validation plugin for my form controls. I am easily able to validation three individual controls with three different messages with proper validation for number, minlength, maxlength. I have controls like web reference, date of birth, postcode and other fields, that have more than one textbox. Below is the html for web reference,

<input name="txtRef1" runat="server" type="text" id="txtRef1" />
<span class="ForwardSlash">-</span>
<input runat="server" name="txtRef2" type="text" id="txtRef2"  />
<span class="ForwardSlash">-</span>
<input runat="server" name="txtRef3" type="text" id="txtRef3"  />

I have written a custom validator method for this, which checks, if any of the above three textboxes are empty, then user will get one message - "Field is required". I don't want to have individual messages because it then breaks the design including forms design layout. The script to achieve the above is here:

function setuppagevalidationrecall() {

    $.validator.addMethod('example',

      function (value, element) {

              return ((value != "") && ($('#txtRef2').val() != "") && ($('#txtRef3').val() != ""));

          }, "Field is required");


    var validator = $("#form1").validate({
        rules: {
            txtRef1: {
                example: true,
                number: true,
                minlength: 3,
                maxlength: 3
            }

        }
    });

How can I improve this functionality to also check for number, minlength and maxlength so that for all the three textboxes above I get only one message as a validation message. And also to make the example method dynamic like with arguments so that it can be applied for any field like postcodes (2 textboxes), date of birth (3 textboxes, dd/mm/yyyy)

politus · Accepted Answer · 2012-11-27 13:22:48Z

1

Displaying a single validation message for multiple controls is what groups are for.

Specify grouping of error messages. A group consists of an arbitrary group name as the key and a space separated list of element names as the value. Use errorPlacement to control where the group message is placed.

use

groups:{ txtRef : "txtRef1 txtRef2 txtRef3" }

and

errorPlacement: function (error, element) {
                if (element.attr("name") == "txtRef1"
             || element.attr("name") == "txtRef2"
             || element.attr("name") == "txtRef3")
                    error.insertAfter("#txtRef3");
                else
                    error.insertAfter(element);
    },

Try it here:

http://jsfiddle.net/uZYMr/2/

answered Nov 27, 2012 at 13:22

politus

6,0862 gold badges35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KKS Over a year ago

thank you very much. This is the exact solution that I was looking for.

Oscar Jara · Accepted Answer · 2012-11-21 16:21:37Z

0

What are you trying to do can be handled by using correctly the invalidHandler and errorPlacement from jquery.validate there is no need to create a function to store just one global error message for lots of elements in a form.

I know jquery.validate sometimes can be annoying because of all the errors fired at the same time but I am sure this will help you.

Take a look at this example:

http://jsfiddle.net/Lrvxk/

As you can see, there is no custom function or tricky thing to get things working as you want.

Hope this helps :-)

answered Nov 21, 2012 at 16:21

Oscar Jara

14.2k10 gold badges64 silver badges94 bronze badges

2 Comments

KKS Over a year ago

The invalidHandler way is good. I tried it before but end up inserting all the error in one span or div which is not required as per design. Like - the validation msg for web reference should be below the three textboxes and so for postcode's two boxes. Not as a summary of msgs. Also, is there a way to remove the error messages once the textbox has been filled as we have out of the box when no external placement is written. Because, in your demo, the message is only removed when the submit button is clicked.

Oscar Jara Over a year ago

Well, this will show just the first error detected in a span, you can change where to put the message for not losing your design.

Collectives™ on Stack Overflow

Display a single validation message for multiple controls using jquery validation plugin

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related