我正在加载一个对话框,其中包含使用 Bootbox.js 即时构建的表单。我正在使用 jQuery 验证插件验证用户输入。
验证工作正常,但当表单填写成功时,submitHandler
会被忽略。
出了什么问题?
submitHandler: function(form) {
alert("Submitted!");
var $form = $(form);
$form.submit();
}
请参阅下面的完整示例。我看过其他提出类似问题的帖子。不幸的是,他们似乎在页面上呈现了表单,而我是通过 jQuery 呈现的。
$(document).on("click", "[data-toggle=\"contactAdmin\"]", function() {
bootbox.dialog({
title: "Contact admin",
buttons: {
close: {
label: 'Close',
className: "btn btn-sm btn-danger",
callback: function() {}
},
success: {
label: "Submit",
className: "btn btn-sm btn-primary",
callback: function() {
$("#webteamContactForm").validate({
rules: {
requestType: {
required: true
}
},
messages: {
requestType: {
required: "Please specify what your request is for",
}
},
highlight: function(a) {
$(a).closest(".form-group").addClass("has-error");
},
unhighlight: function(a) {
$(a).closest(".form-group").removeClass("has-error");
},
errorElement: "span",
errorClass: "help-blocks",
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.appendTo(element.parents('.requestTypeGroup'));
} else { // This is the default behavior
error.insertAfter(element);
}
},
submitHandler: function(form) {
alert("Submitted!");
var $form = $(form);
$form.submit();
}
}).form();
return false;
}
}
},
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<form id="webteamContactForm" class="form-horizontal" method="post"> ' +
'<p>Please get in touch if you wish to delete this content</p>' +
'<div class="form-group"> ' +
'<div class="col-md-12"> ' +
'<textarea id="message" name="message" class="form-control input-md" rows="3" cols="50">This email is to notify you the creator is putting a request for the following item\n\n' +
this.attributes.getNamedItem("data-url").value + '\n\n' + '</textarea> ' +
'<span class="help-block">Feel free to change the message and add more information. Please ensure you always provide the link.</span> </div> ' +
'</div> ' +
'<div class="form-group requestTypeGroup"> ' +
'<label class="col-md-4 control-label" for="requestType">This request is for:</label> ' +
'<div class="col-md-4"> <div class="radio"> <label for="Edit"> ' +
'<input type="radio" name="requestType" id="requestType-0" value="Edit"> ' +
'Editing </label> ' +
'</div><div class="radio"> <label for="Delete"> ' +
'<input type="radio" name="requestType" id="requestType-1" value="Delete"> Deletion</label> ' +
'</div> ' +
'</div> </div>' +
'</form> </div> </div>'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
<a data-toggle="contactAdmin" data-title="help" data-url="http:/www.mydomain.com/some-url" href="#">Contact Web team</a>
最佳答案
检查 jsFiddle 的 DOM,两个问题变得显而易见。
您的“提交”
<button>
是type="button"
.您的“提交”按钮位于
<form></form>
之外容器。
如果您希望 jQuery Validate 插件自动捕获click
“提交”按钮的事件...
- 按钮必须是
type="submit"
- 按钮必须位于
<form></form>
范围内容器。
如果您希望插件按预期运行,则必须满足这两个条件。
<小时/>您还错误地放置了 .validate()
success
中的方法模式对话框“提交”按钮的回调。
.validate()
方法仅用于初始化插件,并且应在创建表单后调用一次。
编辑:
经过一番尝试后,很明显 Bootbox modal plugin可能存在一些干扰表格提交的严重限制。
我正在对话框打开后初始化验证插件。
我正在使用
.valid()
“提交”中的方法来触发验证测试。
我可以初始化验证并按其应有的方式工作,但在实际提交表单之前该对话框被关闭。也许有一个解决方案,但在查看了 Bootbox 的文档后,它并不明显。
https://jsfiddle.net/vyaw3ucd/2/
<小时/>编辑2:
根据OP的解决方案...
bootbox.dialog({
// other options,
buttons: {
success: {
label: "Submit",
className: "btn btn-sm btn-primary",
callback: function () {
if ($("#webteamContactForm").valid()) {
var form = $("#webteamContactForm");
form.submit(); // form submits and dialog closes
} else {
return false; // keeps dialog open
}
}
}
}
});
但是,只需使用提供的 form
直接参数,使用 submitHandler
时不会出现任何错误jQuery Validate 插件的选项。
submitHandler: function (form) {
console.log("Submitted!");
form.submit();
}
关于jQuery .validate() SubmitHandler 未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30720354/