我有一个带有两个按钮的表单
a) 测试 - 单击按钮时调用 javascript 函数来验证几个凭据。
b) 创建 - 单击按钮时调用 javascript 函数来保存表单。 @Messages("playauthenticate.project.create")
我在这两个没有操作的提交按钮周围有一个表单标记。
name、description、accessKey和secretKey是表单中的四个字段。
在单击创建按钮时,我想执行 jquery 验证然后提交表单,但是 jquery 验证 submitHandler 没有在 javascript 函数中被调用并且错误控制台中没有错误。
当我点击创建按钮时,会显示创建警报,然后表单会重置,我能够看到在 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/ 谢谢
最佳答案
.validate()
是初始化插件的方法。这不是测试表单的方法。测试是自动的。
因此,去掉 click
处理程序。单击事件由插件自动捕获。如果表单有效,submitHandler
将触发。
否则,您可以通过将 ajax
放置在 submitHandler
回调中来正确执行此操作。
$(document).ready(function () {
$('#projectForm').validate({ // initialize the plugin
// rules & options
submitHandler: function(form) {
// ajax method
}
});
});
工作演示:http://jsfiddle.net/ACdtX/
有两个不同的按钮和 Action :
HTML:
<form id="projectForm">
....
<input type="button" class="button" value="TEST" id="test" />
<input type="button" class="button" value="Create" id="create" />
</form>
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
});
}
});
});
关于javascript - Jquery 验证 submitHandler 没有被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16602789/