Run a webshim "addCustomValidityRule"

Question

I check if one of two text inputs have text, using webshim, and think custom-validity sounds correct. http://afarkas.github.io/webshim/demos/demos/webforms/4-webforms-custom-validity.html

There is a method called addCustomValidityRule that looks like this:

$.webshims.addCustomValidityRule('testname', function (elem, value) {
    if (value && $(elem).hasClass('test-class') && value != 'foo bar baz') {
        return true; //means yes, it's not valid
    } else {
        return false; //no, it is valid
    }
}, 'you have to enter foo bar baz');

But I can't find any way to trigger it. How do I trigger or run it on "submit click"?

Answer 1

Found another way to soulve this, if anyone know the answear on my original question please tell, good to know anyway :)

Simple like this with webshim:

        @Html.TextBoxFor(x => x.MessageHeader)
        <textarea id="MessageText" name="MessageText" data-dependent-validation='{"from": "MessageHeader", "prop": "required", "toggle": true}' />

More info about this here: http://afarkas.github.io/webshim/demos/demos/webforms/4-webforms-custom-validity.html

Answer 2

@David Larson

HTML5 form validation uses setCustomValidity to mark inputs as invalid with a customError. Unfortunatley a field as to be marked as invalid as soon as possible (submit-event is too late).

This means, if you use this helper addCustomValidityRule, it will run the function instantly on all input, select and textarea elements and also if it detects a change. (change event).

If you want to invoke this function simply trigger the event 'refreshCustomValidityRules' on the given element.