jQuery onclick 在验证中无法正常工作答案

【问题标题】：jQuery onclick not working properly with validationjQuery onclick 在验证中无法正常工作
【发布时间】：2015-08-10 18:49:57
【问题描述】：

我已经使用 onClick 方法来确认我的 Bootstrap 表单的更新。但是当我单击创建按钮时，它会弹出确认消息而不进行验证。

我想要的是，如果用户首先单击创建按钮，它将显示所需的字段验证，并且在所有成功之后只确认弹出窗口应该显示..

请指教

  <form data-toggle="validator" class="form-horizontal" role="form" method="POST"
                                  action="{{ action('Admin\UserController@store') }}">

                                <input type="hidden" name="_token" value="{{ csrf_token() }}">

                                <div class="form-group">

                                    <div class="col-md-12">
                                        <label class="control-label popup-label">Full Name</label>
                                        <input required type="text" class="form-control" name="full_name"
                                               value="{{ old('full_name') }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label class="control-label popup-label">Username</label>
                                        <input required type="text" class="form-control" name="username"
                                               value="{{ old('username') }}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-md-12">
                                        <label class="control-label popup-label">Password</label>
                                        <input pattern=".{5,10}" required title="5 to 10 characters"
                                               type="password" class="form-control"
                                               name="password" value="{{ old('password') }}">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary" onclick="return confirm('Do you want to create this admin?');">Create</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                </div>
                            </form>

【问题讨论】：

标签： javascript jquery twitter-bootstrap-3

【解决方案1】：

您的创建按钮属于提交类型，其默认操作是提交表单。将其设为按钮类型并使用以下功能：

 <button type="button" class="btn btn-primary" onclick="createBtn();">Create</button>

<script>
     function createBtn(){
          if(confirm('Do you want to create this admin?')){
                document.getElementsByTagName("form")[0].submit();
          }
     }

</script>

【讨论】：

【解决方案2】：

我假设您正在使用 Bootstrap Validator 插件：http://1000hz.github.io/bootstrap-validator/

此插件提供了一种方法，通过为您提供可以监听的事件来了解表单何时被验证。

('#form').validator().on('validate.bs.validator', function (e) {
    console.log('validated.');
    // perform confirm and other post-validation tasks...
   confirm('Do you want to create this admin?');
}

【讨论】：