未调用 Jquery 验证 submitHandler
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16602789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery validate submitHandler is not getting called
提问by Santhosh S
I have a form with two buttons
我有一个带有两个按钮的表单
a) Test - on click of the button a javascript function is called to verify a couple of credentials.
a) 测试 - 单击按钮会调用一个 javascript 函数来验证几个凭据。
b) Create - on click of the button a javascript function is called to save the form. @Messages("playauthenticate.project.create")
b) 创建 - 单击按钮会调用 javascript 函数来保存表单。@Messages("playauthenticate.project.create")
I have a form tag around these two submit buttons with no action.
我在这两个提交按钮周围有一个表单标签，没有任何操作。
name, description, accessKey and secretKey are the four fields in the form.
name、description、accessKey 和 secretKey 是表单中的四个字段。
on clicking on the create button, I want to perform jquery validation and then submit the form but the jquery validation submitHandler is not getting called in the javascript function and there are no errors in the Error Console.
单击创建按钮时，我想执行 jquery 验证，然后提交表单，但在 javascript 函数中未调用 jquery 验证 submitHandler 并且错误控制台中没有错误。
When I click on the create button, the create alert is shown and then the form resets and I am able to see all the parameters entered in the URL.
当我单击创建按钮时，会显示创建警报，然后表单会重置，我可以看到在 URL 中输入的所有参数。
$("create").click(function() {
alert("create ");
$('#projectForm').validate( {
rules: {
name: {
minlength: 6,
required: true
},
description: {
required: true,
description: true
},
accessKey: {
minlength: 10,
required: true
},
secretKey: {
minlength: 15,
required: true
}
},
focusCleanup: false,
wrapper: 'div',
errorElement: 'span',
highlight: function(element) {
$(element).parents ('.control-group').removeClass ('success').addClass('error');
},
success: function(element) {
$(element).parents ('.control-group').removeClass ('error').addClass('success');
$(element).parents ('.controls:not(:has(.clean))').find ('div:last').before ('<div class="clean"></div>');
},
errorPlacement: function(error, element) {
error.appendTo(element.parents ('.controls'));
},
submitHandler: function() {
alert("hello");
var name = $('#name').val();
var description = $('#description').val();
var accessKey = $('#accessKey').val();
var secretKey = $('#secretKey').val();
var dataString = 'name='+ name + '&description=' + description + '&accessKey=' + accessKey+ '&secretKey=' + secretKey;
//alert(dataString);
$.ajax({
type: "POST",
url: "/demo/save",
data: dataString,
success: function(data) {
$('#result').html("<h2>demo created successfully!</h2>");
},
error: function(data) {
$("#result").html("<h2>Error!</h2>");
}
})
}
});
});
JSfiddle - http://jsfiddle.net/NJxh5/3/Thank you
JSfiddle - http://jsfiddle.net/NJxh5/3/谢谢
回答by Sparky
.validate()is the method for initializingthe plugin. It's not a method of testing the form. Testing is automatic.
.validate()是初始化插件的方法。这不是测试表单的方法。测试是自动的。
Therefore, get rid of the clickhandler. The click event is captured automatically by the plugin. If the form is valid, the submitHandlerwill fire.
因此，摆脱click处理程序。单击事件由插件自动捕获。如果表单有效，submitHandler则将触发。
Otherwise, you are doing it properly by placing your ajaxinside the submitHandlercallback.
否则，您通过将您的ajax放入submitHandler回调中来正确地做到这一点。
$(document).ready(function () {
$('#projectForm').validate({ // initialize the plugin
// rules & options
submitHandler: function(form) {
// ajax method
}
});
});
Working DEMO: http://jsfiddle.net/ACdtX/
工作演示：http: //jsfiddle.net/ACdtX/
With two different buttons and actions:
有两个不同的按钮和动作：
HTML:
HTML：
<form id="projectForm">
....
<input type="button" class="button" value="TEST" id="test" />
<input type="button" class="button" value="Create" id="create" />
</form>
jQuery:
jQuery：
$(document).ready(function () {
$('.button').each(function () {
$(this).on('click', function () {
var action;
if ($(this).attr('id') == "test") {
action = 'test.php';
} else {
action = 'create.php';
}
$('#projectForm').submit();
});
});
$('#projectForm').validate({ // initialize the plugin
// rules & options
submitHandler: function(form) {
// ajax method
$.ajax({
url: action, // determined from click handler above
// ajax options
});
}
});
});
