this.init不是React App中的功能jquery验证插件

Question

I have form in my react application, which validates via jquery validation plugin.

let validator = $('form').validate({
        errorClass:  'has-error',
        errorElement:'label',
    });
    validator.form();
    if ($('.has-error').length > 0) {
        $('.has-error').each(function (index) {
            $.validator().showErrors({prop:$(this).data('error')});
        });
    } else {
         /*work with data*/
}

All errors messages showing fine, but every time when validation triggered, I get error in console:

this.init is not a function

And link me to code in plugin script:

$.validator = function( options, form ) {
    this.settings = $.extend( true, {}, $.validator.defaults, options );
    this.currentForm = form;
    this.init();
};

How can I fix it? UPD 1: below in the plugin script code i found this code:

$.extend( $.validator, {
//some code
prototype: {

        init: function() {
            this.labelContainer = $( this.settings.errorLabelContainer );
            this.errorContext = this.labelContainer.length && this.labelContainer || $( this.currentForm );
            this.containers = $( this.settings.errorContainer ).add( this.settings.errorLabelContainer );
            this.submitted = {};
            this.valueCache = {};
            this.pendingRequest = 0;
            this.pending = {};
            this.invalid = {};
            this.reset();
//some code

Maybe it fires error exception because of this init function?

Answer 1

I think the problem is in this line:

$.validator().showErrors({prop:$(this).data('error')});

$.validator function is a constructor so it must always be used with new keyword. If you call it as normal function this inside this function points to global window (or is undefined in strict mode ) which doesn't have init method