Question

I am using the jQuery Validation plugin on a form, and was wondering what’s the easiest way of checking if the value of the input is the same as the label?

I’m using jQuery to take the text of each input’s label and insert it as the default value of each form element, and then hide the label.

What I’m wanting to do is for the validation to fail if the form is submitted with the default input value unaltered.

Any ideas?

Thanks!

Answer 1

There are a few ways to achieve this one is with a custom validator method
I think you’ll need to do something like this

There are many ways to get the label text

I’m assuming that you want the validation to fail if the label text = the value

$(function (){
    jQuery.validator.addMethod(
        "doesnotmatchlabel",
        function(value, element) {
            var label = $(element).closest('div.elHolder').find('label').text();
            var result = ! label == value;
            return this.optional(element) || result;

        },
        "required"
    );

});

Also to add this method to your elements you might do this…

    var textInputs= $('input:text');
    if ( textInputs.length ){
        textInputs.each(function (i,el){
            var jqEl = $(el);
            jqEl.rules( "add",
                {"doesnotmatchlabel": true}
            );
        })
    }