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或bootstrap.min.js附带formValidation插件的地方formValidation plugin需要此文件才能使用bootstrap框架。

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

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

参考可以Found Here以及将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>

Fiddle Working Example

Bootstrap

1 个答案: