ajax中的属性rules,javascript - 为什么jquery-validate会在我的jQuery.ajax调用之前跳转，为什么要查找不存在的属性？ [重复] - 堆栈内存溢出...

这不是两个链接问题的重复，因为我不是在问如何让jquery-validate和jquery.ajax()一起工作，而是在问为什么jquery-validate阻碍了表面上独立的ajax请求

我有一个通过jquery-validate验证的大型表格，它工作正常。 我在此表单内添加了一个按钮(“按钮”类型)，该按钮引发了Bootstrap 4.0模态，位于该表单之外。 一切正常。 模态上有两个文本框和一个“发送”按钮(键入“按钮”)。 Send按钮在$(document).ready()范围内定义了一个click()侦听器，该侦听器获取文本框的内容，json_stringify它们，并将其在AJAX请求中提交给URI。

但是，当我单击“发送”按钮时，在控制台中出现以下错误：

TypeError: undefined has no properties (jquery.validate.min.js:formatted:804)

如果我看一下那行代码，它就是jquery.validate.min.js的结尾：

800 return a.ajaxPrefilter ? a.ajaxPrefilter(function (a, b, d) {

801 var e = a.port;

802 'abort' === a.mode && (c[e] && c[e].abort(), c[e] = d)

803 }) : (b = a.ajax, a.ajax = function (d) {

804 var e = ('mode' in d ? d : a.ajaxSettings).mode,

805 f = ('port' in d ? d : a.ajaxSettings).port;

806 return 'abort' === e ? (c[f] && c[f].abort(), c[f] = b.apply(this, arguments), c[f]) : b.apply(this, arguments)

807 }),

808 a

809 });

所以那是：

var e = ('mode' in d ? d : a.ajaxSettings).mode,

它正在我的ajax数据中寻找“模式”，而不是找到它，然后继续在ajaxSettings中寻找它，因为ajaxSettings不存在，如果它这样做了，就不会在其中包含“模式”，因为那不是问题。

首先，我根本无法理解为什么jquery-validate完全参与了ajax请求。 我没有要求。 我定义了一个涉及jquery-validate的函数，这就是我附加到主窗体上的validate()函数。

其次，当$ .ajax()的jQuery文档未列出此属性时，为什么要查找'mode'属性。 在下一行中，它将询问“端口”，这也不是您传递给$ .ajax()的属性。

那么，这到底是怎么回事？

起初，我认为模式(及其输入框内容)位于HTML表单内部是一个问题，因此我将其移到了form元素之后。 那没有解决。

因此，然后我将输入框包装成它们自己的形式，未定义任何方法或动作，以防jquery-validate将其拾取并验证为(只是一个疯狂的猜测)的子级，但这并不能解决问题。

我在StackOverflow和Web的其余部分中搜索了诸如“ jquery ajax模式”，“ jquery验证ajax”和“ jquery-validate为何停止我的ajax请求”之类的东西，我发现很多人问如何制作jquery-validate可与ajax一起使用，但是与告诉它摆脱该死的方式无关。

我还查看了其他人对于$ .ajax()的示例，但没有人包含此属性，因此我确定它不应该存在，并且对于它所代表的价值一无所知。

页面的轮廓(我删除了所有无关的位，即主要表单内容，但未删除其元素，以及该表单的jquery-validate规则和消息，您只需要滚动即可)：

(no scripts imported here)

(textbox)

... more of this ...

Some text asking of the user wants to press the button for the ajax form

click here to send a thing

Ajax widgets sent: 0

(radio buttons)

... the rest of the main form ...

Send an AJAX request

×

Name:

Email Address:

Send

$(function () {

$('[data-toggle=\"tooltip\"]').tooltip();

});

$(document).ready(function() {

$('#mainform').validate( {

submitHandler: function(form) {

form.submit();

},

errorClass: 'is-invalid',

validClass: 'is-valid',

rules: {

(abridged)

},

messages: {

(abridged)

},

errorElement: 'em',

errorPlacement: function ( error, element ) {

error.addClass( 'invalid-feedback' );

if ( $.inArray( element.prop( 'type' ), [ 'checkbox', 'radio' ] ) >= 0 ) {

error.insertBefore( element.closest( '.form-group' ) );

} else {

error.insertBefore( element.closest( '.form-group' ).first() );

}

},

highlight: function ( element, errorClass, validClass ) {

$( element ).addClass( errorClass ).removeClass( validClass );

},

unhighlight: function ( element, errorClass, validClass ) {

$( element ).addClass( validClass ).removeClass( errorClass );

}

} );

$('#ajaxsend').click(function() {

let ajaxname = $('#ajaxname').val();

let ajaxemail = $('#ajaxemailaddress').val();

let ajaxcsrf = $('#ajaxz').val();

let ajaxid = $('#ajaxid').val();

let ajaxurl = '/ajaxhandler/' + ajaxid + '/';

$.ajax({

url: ajaxurl,

type: 'POST',

data: JSON.stringify({name: ajaxname, email: ajaxemail, csrf: ajaxcsrf}),

dataType: 'json',

contentType: 'application/json',

}).done( function( data ) {

let responsestatus = data.status;

if (responsestatus === 'success') {

let ajaxcountelement = $('#ajaxcount');

let successcount = parseInt(ajaxcountelement.text());

successcount++;

ajaxcountelement.text(successcount);

$('#ajaxresponsemessage')

.addClass('text-success')

.removeClass('text-danger')

.text('Ajax call success!');

$('#ajaxname').val('');

$('#ajaxemailaddress').val('');

console.log('Sent ajax widget.');

} else if (responsestatus === 'failed') {

$('#ajaxresponsemessage')

.addClass('text-danger')

.removeClass('text-success')

.text('Something unexpected happened and the ajax came back negative. Please check and try again.');

console.log('Ajax request sent, but responded with failure.');

}

}).fail( function() {

$('#ajaxresponsemessage').addClass('text-danger').removeClass('text-success').text('Error when sending ajax request.');

console.log('Ajax failure.');

});

});

});

我期望$('＃ajaxform')。click()事件触发，随后的$ .ajax()完全按照书面要求执行。 但是，jquery-validate在某个地方被拾取并在无法在ajax请求中找到jquery.ajax()文档甚至未提及的属性时引发错误。