Javascript 引导JS验证程序和表单提交

我正在使用这个引导验证程序github.com/1000hz/Bootstrap validator用于我的引导表单，但是在提交表单之前似乎无法设置一些外部JS条件

例如，我想从外部JS文件执行以下操作：

1#如果表单或表单的某些输入在使用validator（）时无效，则我会执行一些操作

2#否则用户将看到一些引导按钮加载消息，直到所有内容都提交到数据库中

您可以在此处使用单个案例：

$('button[data-loading-text]').click(function () {
    var btn = $(this);
    btn.button('loading');
    $.blockUI();

 // #1 if form is invalid using validator() then I unblock the please wait message $.unblockUI(); and reset the bootstrap loading button.
 // #2 else users will still see the "please wait" message + bootsrap loading button untill everything is submitted into the databases.
});        

任何帮助都将不胜感激，因为插件事件似乎只针对特定字段设置，而不是针对完整表单验证

---

请查看1000hz页面上的事件部分。（）

如果您想在验证之前启动操作，只需聆听事件即可

$('#someFormId').on('validate.bs.validator', function(){
    doSomeStuff();
});

编辑

事件的问题是，它在每个字段之后都被激发。据我所知，这个插件并没有为完成成功的验证提供事件。

希望它能帮助你

$(document).ready(function () {

 $('#contact-form').validate({
    rules: {
        name: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        message: {
            minlength: 2,
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('Done');
    }
});

});

---

我在寻找其他东西时遇到了这个问题，但我一直致力于你想要实现的目标

我的解决方案是使用插件作者提供的代码片段绑定到submit按钮

$('#form').validator().on('submit', function (e) {
  if ( !e.isDefaultPrevented() ) {
    // put your conditional handling here. return true if you want to submit
    // return false if you do not want the form to submit
  }
});

希望这能帮助别人

$(function () {
     $("#myForm").validator();

     $("#myButton").click(function (e) {
         var validator = $("#myForm").data("bs.validator");
         validator.validate();

         if (!validator.hasErrors()) 
         {
              $("myForm").submit();
         } else 
         {
              ...
         }
     }
})

---

希望对您有所帮助。

我一直在努力使用这个表单验证程序js插件编写更好的代码

按照我的代码进行操作，然后自己尝试：

// Select every button with type submit under a form with data-toggle validator
$('form[data-toggle="validator"] button[type="submit"]').click(function(e) {
    // Select the form that has this button
    var form = $(this).closest('form');
    // Verify if the form is validated
    if (!form.data("bs.validator").validate().hasErrors()) {
        e.preventDefault();
        // Here go the trick! Fire a custom event to the form
        form.trigger('submitted');
    } else  {
        console.log('Form still not valid');
    }
});

// And in your separated script, do the following:
$('#contactForm').on('submitted', function() {
    // do anything here...
})

考虑以下HTML代码：

<form id="contactForm" action="/contact/send" method="POST" data-toggle="validator" role="form">
    <div class="form-group has-feedback">
        <label for="inputName" class="control-label">Name:</label>
        <input type="text" name="inputName" id="inputName" class="form-control" data-error="Your input has an invalid value"/>
        <span class="help-block with-errors"></span>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-success">Send</button>
    </div>
</form>

姓名：
发送

您可以使用validated.bs.validator传递事件，以便在验证表单后执行某些操作

---

问候

你查过文件了吗？是的，我看到过，也尝试过，但它只检查第一次单击和下一次用户单击是否有效。如本例所示，感谢您的帮助，但这是一个不同的jquery插件选中此项是的，我已经看到并尝试过，但它只检查第一次单击，下一次用户单击不起作用。就像这个例子，这就是我的问题所在。它在每个字段之后都会触发，目前无法控制成功完成的验证。也许其他任何帮助都会有用。塔恩克斯·伊戈尔，这正是我需要的。