Question

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

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

1＃如果表格或表格的某些输入使用验证器（）无效，那么我会采取一些行动。

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

您可以在这里找到一个案例：

$('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.
});

http://jsfiddle.net/temgo/k07nx06k/12/

任何帮助都将受到赞赏，因为看起来插件事件仅针对特定字段设置，而不是针对完整表单验证。

此致

Answer 1

查看1000hz页面上的事件部分。（http://1000hz.github.io/bootstrap-validator/#validator-events）

如果您想在验证前启动操作 - 只需听取此事件。

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

修改

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

Answer 2

对于你的ref希望它会帮助你

$(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');
    }
});

});

Answer 3

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

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

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

希望能有所帮助。

Answer 4

我遇到了这个问题寻找其他的东西，但我确实正在努力实现你想要实现的目标。

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

$('#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
  }
});

希望能帮助别人。

Answer 5

我正在努力使用此表单验证器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>

Answer 6

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

致谢！

Bootstrap JS验证器和表单提交

6 个答案: