Question

我使用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>

Answer 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>

Answer 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?');
}

jQuery onclick与验证无法正常工作

2 个答案: