jQuery unobtrusive custom adapter and method in jsFiddle

Question

I cannot make this jsFiddle work but it works in the browser: http://jsfiddle.net/vtortola/jYq2X/

I am trying to add a new custom rule to compare two fields. The custom adapter works, it is being called and setting the options. But the custom method is never called.

I am executing this JS on DOM ready:

$.validator.addMethod("customequal-method", function (val, el, p) {
    var $other = $(el).closest('form').find('input[name=' + p.other + ']'); 
    return $other.length && $other.val() == val;
});

$.validator.unobtrusive.adapters.add("customequal", ["other"],
                                     function (options) {
                                         options.rules["customequal-method"] = options.params;
                                         options.messages["customequal-method"] = options.message;
                                     });



$(function(){
    $.validator.unobtrusive.parse($('#myform'));
    $('[type=button]').click(function(e){e.preventDefault(); $('form').valid();});

    $('input[type=text]').blur();
})

These are the fields in HTML:

    <input type="text" name="StartDate2" id="StartDate2" value="2"
           data-val="true" data-val-customequal="xx xxx" data-val-customequal-other="EndDate2"/>   
    <input type="text" name="EndDate2" id="EndDate2" value="3"
           data-val="true" data-val-customequal="xx xx" data-val-customequal-other="StartDate2"/>

I have been trying different things but nothing seems to work.

Any idea?

@Sparky so the link to the JsFiddle example must be irrelevant to debugging this? — TheOptimusPrimus
– TheOptimusPrimus, Commented Jul 30, 2013 at 19:50
@TheOptimusPrimus, for the same reason every single SO question containing a fiddle isn't tagged jsfiddle. — Sparky
– Sparky, Commented Jul 30, 2013 at 20:10
Then it looks like there is a lot of moderation work to do: stackoverflow.com/questions/tagged/jsfiddle — TheOptimusPrimus
– TheOptimusPrimus, Commented Jul 30, 2013 at 20:17
@Sparky I am afraid the question IS about jsFiddle. That code works in a browser, but not in jsFiddle. And that was the whole reason of this post. — vtortola
– vtortola, Commented Jul 30, 2013 at 21:07

nemesv · Accepted Answer · 2013-07-30 19:44:17Z

Your fiddle is not working because:

all your code runs in the DOM ready so you are adding your custom unobtrusive.adapters.add after the unobtrusive.validator plugin called unobtrusive.parse(document) which registers all the inputs without your custom validator
if you call .validate() multiple times it only registers the rules for the first time and does not override them on subsequent calls. So although you've called unobtrusive.parse again in the DOM loaded this time with the custom adapter added it still won't have any effect.

So you have two ways to fix it:

Register your custom adapters before the DOM loaded event, you can do this with changing your fiddle to use

"No wrap - in <head>"

Demo JSFiddle.

Or

Remove the already added validator object with using $('#myform').data('validator', null) before calling unobtrusive.parse manually:

$(function () {
    $('#myform').data('validator', null);

    $.validator.unobtrusive.parse($('#myform'));
    $('[type=button]').click(function (e) {
        e.preventDefault();
        $('form').valid();
    });

    $('input[type=text]').blur();
})

Demo JSFiddle.

Collectives™ on Stack Overflow

jQuery unobtrusive custom adapter and method in jsFiddle

1 Answer 1

Your fiddle is not working because:

So you have two ways to fix it:

Or

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your fiddle is not working because:

So you have two ways to fix it:

Or

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related