Question

我正在尝试修改Bootstrap模式，以便表单显示错误，并且在表单输入为空时不提交。我知道“必需”命令作为另一种可能性，但我想要它的样式，所以它看起来更好一点。我只是复制并粘贴了其他人所做的事情，并且它在他们的网站上工作（http://formvalidation.io/examples/modal/#resetting-form-when-showing-the-modal）但不是我的。当我单击提交时使用空字段，模态将关闭。

这是我的代码：

HTML：

<button type="button" id="appointmentbtn" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" />Make an Appointment</button>

<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h5 class="modal-title">Request an Appointment</h5>
        </div>

        <div class="modal-body">
            <!-- The form is placed inside the body of modal -->
            <form id="loginForm" method="post" class="form-horizontal">
                <div class="form-group">
                    <label class="col-xs-3 control-label">Full Name</label>
                    <div class="col-xs-5">
                        <input type="text" class="form-control" name="name" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-xs-3 control-label">Phone Number</label>
                    <div class="col-xs-5">
                        <input type="number" class="form-control" name="number" placeholder="(888)888-8888" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-xs-5 col-xs-offset-3">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

JS：

$(document).ready(function() {
$('#loginForm').formValidation({
    framework: 'bootstrap',
    excluded: ':disabled',
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        name: {
            validators: {
                notEmpty: {
                    message: 'The name is required'
                }
            }
        },
        number: {
            validators: {
                notEmpty: {
                    message: 'The phone number is required'
                }
            }
        }
    }
});
});

Answer 1

你忘了包含一个必需的JS库，它导致带有空字段的表单在没有验证的情况下提交并且模态被关闭，除此之外代码没有任何问题，

需要CSS

Bootstrap.css
FormValidation.min.css
字体-awesome.min.css

需要JS库

的jquery.js
Bootstrap.js（Bootstrap Framework）
FormValidation.min.js
Bootstrap.min.js（您错过了这个库，附带formValidation插件以支持Bootstrap框架工作，必须包含在文档中以便验证工作
注意：< / strong>这不是Bootstrap Framework图书馆）

$(document).ready(function() { $('#loginForm').formValidation({ framework: 'bootstrap', excluded: ':disabled', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { name: { validators: { notEmpty: { message: 'The name is required' } } }, number: { validators: { notEmpty: { message: 'The phone number is required' } } } } }); });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script> <button type="button" id="appointmentbtn" class="btn btn-primary" data-toggle="modal" data-target="#loginModal" />Make an Appointment</button>  <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h5 class="modal-title">Request an Appointment</h5> </div> <div class="modal-body">  <form id="loginForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Full Name</label> <div class="col-xs-5"> <input type="text" class="form-control" name="name" /> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">Phone Number</label> <div class="col-xs-5"> <input type="number" class="form-control" name="number" placeholder="(888)888-8888" /> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-3"> <button type="submit" class="btn btn-primary">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </div> </form> </div> </div> </div>

Fiddle

Answer 2

尝试这样称呼：

$(document).ready(function() {
  $('#submit').click(function(e){
            e.prevetDefault();
        $('#loginForm').formValidation({
            framework: 'bootstrap',
            excluded: ':disabled',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The name is required'
                        }
                    }
                },
                number: {
                    validators: {
                        notEmpty: {
                            message: 'The phone number is required'
                        }
                    }
                }
            }
          return false;
        });
    })
});

不幸的是我没有这个插件所以我无法测试它。如果这不起作用，请不要怪我。通常我使用＆＃39; jquery.validate.js＆＃39;这是免费的。

Bootstrap模态样式表单验证

2 个答案: