jQuery .validate（）submitHandler没有触发
我正在加载一个对话框，其中包含使用Bootbox.js即时构建的表单 ，我正在使用jQuery validate插件validation用户输入。
validation工作正常，但在成功填写表单时将忽略submitHandler 。
出了什么问题？
submitHandler: function(form) { alert("Submitted!"); var $form = $(form); $form.submit(); }
请参阅下面的完整示例。 我查看了其他类似问题的post。 不幸的是，他们似乎在页面上呈现了表单，而我正在渲染我的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: ' ' + ' ' + ' ' }); });
Contact Web team
查看jsFiddle
检查jsFiddle的DOM和两个问题变得明显。
-
您的“提交”
是一个type="button"。 -
您的“提交”按钮位于
容器之外。
如果你想让jQuery Validate插件自动捕获“提交”按钮的click事件……
- 按钮必须是
type="submit" - 该按钮必须位于
如果您希望插件按预期运行，则必须满足这两个条件。
您还错误地将.validate()方法放在模式对话框“提交”按钮的success回调中。
.validate()方法仅用于初始化插件，应在创建表单后调用一次 。
编辑 ：
在玩完这个之后，很明显Bootbox模式插件可能有一些严重的限制，干扰了表单的提交。
-
我在打开对话框后初始化Validate插件。
-
我在“submit”中使用
.valid()方法来触发validation测试。
我可以初始化validation并按预期工作，但在实际表单提交之前，对话框将被取消。 也许有一个解决方案，但在审查了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参数，在使用jQuery Validate插件的submitHandler选项时没有任何错误。
submitHandler: function (form) { console.log("Submitted!"); form.submit(); }
演示： https ： //jsfiddle.net/vyaw3ucd/5/
感谢Sparky的帮助，您提供的解决方案给了我答案。 似乎让submitHandler对提交逻辑造成了一些混淆。
我删除了submitHandler并将以下内容添加到成功回调中，一切都按预期工作
success: { label: "Submit", className: "btn btn-sm btn-primary", callback: function () { if($("#webteamContactForm").valid()){ var form = $("#webteamContactForm"); form.submit(); } else { return false; } } }
我知道这是一个老post，但我想我会分享我对类似问题的决心。 我无法通过按Enter键来提交表单，但我可以在输入时validation它。 所以我使用了链接方法，现在我可以在输入时提交表单了。
jQuery的：
//Variables created without the keyword var, are always global, even if they are created inside a function. var form = $('#'); var FormError = $('.alert-danger',form); var success = $('.alert-success',form); form.keypress(function(e){ if(e.which == 13){ //TRIGGER SUBMIT THROUGH ENTER document.getElementById('defaultActionButton').click(); } }).validate({ focusInvalid: false, // do not focus the last invalid input onkeyup: false, ignore: ".ignore", //required for hidden input validation ie: hiddenRecaptcha rules:{ "TYPE": { required: true, }, "MSG": { required: true, rangelength:[40,1000] }, "CONTACT": { required: { depends: "#newuser:checked" } }, "EMAIL": { required: true, email: { depends: function() { if(!$("#newuser:checked")) return true; else return false; } }, HTH_TelephoneEmail: { depends: function() { if($("#newuser:checked")) return true; else return false; } } }, hiddenRecaptcha: { required: function () { if (grecaptcha.getResponse() == '') { return true; } else { return false; } } } }, messages: { // custom messages for form validation input "TYPE": { required: 'Please select an option as it pertains to your inquiry' }, "MSG": { required: 'Please provide some content as it pertains to your inquiry' }, "CONTACT": { required: "Please enter a contact person or company" }, hiddenRecaptcha: { required: function() { $(".g-recaptcha:first").tooltip("enable").tooltip("show"); } } }, showErrors: function(errorMap, errorList) { // Clean up any tooltips for valid elements $.each(this.validElements(), function (index, element) { element = $(element); NoError_ToolTip(element); }); // Create new tooltips for invalid elements $.each(errorList, function (index, error) { element = $(error.element); message = error.message; Error_ToolTip(element,message); }); }, invalidHandler: function (event, validator) { //display error alert on form submit success.hide(); $(document).scrollTop( $(".form-body").offset().top ); }, submitHandler: function () { Submit_Complete(); //fires ajax call } });
您应该更改提交按钮的名称，因为您有命名冲突。 例如，尝试将其从name="submit"更改为name="other" 。