Jquery Unobtrusive Validation not firing in MVC

Question

As the title says, I am having issues with JQuery Unobtrusive validation in javascript in an MVC application.

What I have done:

Inputs on my form have been bound with appropriate rules which will be checked in my custom javascript:

<input type="text" class="form-control" name="rates_taxes" id="rates_taxes" data-val='true' data-val-ispositive="You must enter a positive value here or 0" data-val-isnumeric="You must enter a numerical value here. (e.g 250000)" required>

    ...
    jQuery.validator.addMethod('isnumeric', function (value) {
        return $.isNumeric(value);
    }, '');

    jQuery.validator.unobtrusive.adapters.add('isnumeric', function (options) {
        options.rules['isnumeric'] = {};
        options.messages['isnumeric'] = options.message;
    });

not shown here, I have tested that the isNumeric method does get entered when a user types in the input or submits the form.

The issue is the submission of the form. The two events, InvalidHandler and SubmitHandler simply doesn't fire.

I have implemented it using the method on the Jquery Validation Site - which is passing in the handlers as a Javascript object to the $("form").validate({ invalidHander: function(e, validator){ ... }); method - it didn't fire off

now I have this approach:

     $(document).on("click", "button[type='submit']", function (e) {
        if ($(e.target).data("customValidate") === true) {
            e.preventDefault();
            var form = $(e.target).parents("form");

            $(form).data("validator").settings.submitHandler = function (formhandler) {
                alert('submit');
                formhandler.submit();
            }; // <----

            $(form).data("validator").settings.invalidHandler = function (e, validator) {
                alert('error');
                for (var i = 0; i < validator.errorList.length; i++) {
                    var element = '#' + validator.errorList[i].element.name;
                    var error = validator.errorList[i].message;
                    if (!error || error === "undefined") {
                        error = "This field is required.";
                    }
                    $(element).prop('title', error);
                    $(element).data('placement', 'right');
                    $(element).data('toggle', 'tooltip').tooltip('show');
                }
            }; // <----

            $(form).validate();
        }
    });

Which is directly setting the invalid and valid handlers for the Jquery Unobtrusive Validation Engine in the form's data.

Neither approach works. I have worked on another MVC site with my team before where this approach worked, though I haven't implemented the unobtrusive validation - so the reason this doesn't work as I implemented above escapes me.

Any suggestions on what I might have missed?

Answer 1

就我而言，简单的解决方法-e.preventDefault必须删除。