javascript - Bootstrap 中的模态表单验证

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 插件 与 framework: 'bootstrap' 一起使用时验证不起作用的可能且常见的原因大多是忘记包含 bootstrap.js或者 bootstrap.min.js 附带 formValidation 插件，其中 formValidation 插件 需要此文件才能与 bootstrap 框架配合使用。

Don't confuse bootstrap(.min).js file provided by the Bootstrap framework with bootstrap(.min).js provided by FormValidation which is placed inside the formvalidation/dist/js/framework directory.

They are two different files and both of them need to be included.

引用可以是Found Here以及在 bootstrap 框架中使用 formValidation 插件 时要包含哪些库

$(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>

Fiddle Working Example