引导程序中的模态形式验证

Question

我正在使用twitter bootstrap并尝试将验证放在我的模式形式上。

我哪里做错了？

我尝试了<form role="form">但是它不起作用。

<a href="#" class="btn btn-lg btn-custom1 btn-block" data-toggle="modal" data-target="#reserveModal">Reserve Product</a>
<div class="modal fade" id="reserveModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Reserve Product</h4>
      </div>
      <div class="modal-body">
        <!-- FORM -->
          <form id="frm_reserve" name="frm_reserve" class="horizontal">
          <fieldset>
            <div class="form-group">
              <label for="inputRName" class="col-xs-6 control-label">Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="inputRName" id="inputRName" placeholder="Your Name" data-placement="top" required autofocus>
            </div>
            </div>

            <div class="form-group">
              <label for="textArea" class="col-xs-6 control-label">Address</label>
            <div class="col-lg-10">
              <textarea class="form-control" rows="3" name="textAddress" id="textAddress" placeholder="Your Address"></textarea>
            </div>
            </div>

            <div class="form-group">
              <label for="inputlName" class="col-xs-6 control-label">Email</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="inputREmail" id="inputREmail" placeholder="email@you.com" required >
            </div>
            </div>

            <div class="form-group">
              <label for="inputlName" class="col-xs-6 control-label">Contact No.</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" name="inputRContact" id="inputRContact" placeholder="09XX-XXX-XXXX" required >
            </div>
            </div>
          </fieldset>
          </form>

我的剧本：

$(document).ready(function() {
$('#reserveModal').formValidation({
    framework: 'bootstrap',
    excluded: ':disabled',
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        inputRName: {
            validators: {
                notEmpty: {
                    message: 'Your name is required'
                }
            }
        },
        textAddress: {
            validators: {
                notEmpty: {
                    message: 'Your address is required'
                }
            }
        },
        inputREmail: {
            validators: {
                notEmpty: {
                    message: 'Your email is required'
                }
            }
        },
        inputRContact: {
            validators: {
                notEmpty: {
                    message: 'Your contact number is required'
                }
            }
        }
    }
   });
});

任何帮助将非常感激。 我也愿意征求意见。

为了清楚起见，添加了$(document).ready(function() 。

Answer 1

使用时可能和常见原因验证工作不formValidation plugin与framework: 'bootstrap'大多忘了，包括bootstrap.js OR bootstrap.min.js附带formValidation插件当需要对这个文件formValidation plugin与引导框架合作。

不要将Bootstrap框架提供的bootstrap（.min）.js文件与FormValidation提供的bootstrap（.min）.js混淆，后者位于formvalidation / dist / js / framework目录中。

它们是两个不同的文件，并且都需要包含它们。

可以在此处找到参考，以及在带有bootstrap框架的formValidation plugin使用哪些库

 $(document).ready(function() { $('#reserveModal').formValidation({ framework: 'bootstrap', excluded: ':disabled', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { inputRName: { validators: { notEmpty: { message: 'Your name is required' } } }, textAddress: { validators: { notEmpty: { message: 'Your address is required' } } }, inputREmail: { validators: { notEmpty: { message: 'Your email is required' }, emailAddress: { message: 'The input is not a valid email address' } } }, inputRContact: { validators: { notEmpty: { message: 'Your contact number is required' }, regexp: { message: 'The phone number can only contain the digits, spaces, -, (, ), + and .', regexp: /^[0-9\\s\\-()+\\.]+$/ } } } } }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.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> <a href="#" class="btn btn-lg btn-custom1 btn-block" data-toggle="modal" data-target="#reserveModal">Reserve Product</a> <div class="modal fade" id="reserveModal" tabindex="-1" role="dialog" aria-labelledby="reserveModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Reserve Product</h4> </div> <div class="modal-body"> <!-- FORM --> <form id="frm_reserve" name="frm_reserve" class="horizontal"> <fieldset> <div class="form-group"> <label for="inputRName" class="col-xs-6 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" name="inputRName" id="inputRName" placeholder="Your Name" data-placement="top" required autofocus> </div> </div> <div class="form-group"> <label for="textArea" class="col-xs-6 control-label">Address</label> <div class="col-lg-10"> <textarea class="form-control" rows="3" name="textAddress" id="textAddress" placeholder="Your Address"></textarea> </div> </div> <div class="form-group"> <label for="inputlName" class="col-xs-6 control-label">Email</label> <div class="col-sm-10"> <input type="text" class="form-control" name="inputREmail" id="inputREmail" placeholder="email@you.com" required> </div> </div> <div class="form-group"> <label for="inputlName" class="col-xs-6 control-label">Contact No.</label> <div class="col-sm-10"> <input type="text" class="form-control" name="inputRContact" id="inputRContact" placeholder="09XX-XXX-XXXX" required> </div> </div> </fieldset> </form> 

小提琴工作示例