0

我正在使用 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()。

4

1 回答 1

1

formValidation plugin使用with时验证不起作用的可能和常见原因framework: 'bootstrap'主要是忘记包含插件随附的bootstrap.jsOR需要此文件才能使用引导框架。bootstrap.min.jsformValidationformValidation plugin

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

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

可以在此处找到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>

小提琴工作示例

于 2016-01-27T15:49:02.467 回答