Question

我想实现这一点并验证每个元素，所以没有留空：

名字 - 仅限字符

姓氏 - 仅限字符，连字符和撇号

电子邮件 - 有效的电子邮件地址

邮政编码 - 美国邮政编码验证

美国各州 - 州下拉列表

这是我的HTML代码：

           <section>
          <div class="container form-container col-lg-12">
          <form class="form_data" role="form" id="needs-validation" novalidate>
         <h1 class="text-center"> Contact us </h1>
         <div class="form-group center-block">
          <label for="input--email" class="form-labels">Email address</label>
             <input type="email" class="form-control form-control-lg" id="input--email" aria-describedby="emailHelp" placeholder="norman-geller@email.com">
            <small id="emailHelp" class="form-text text-muted">Please provide to us a valid email adress.We won't shared it with anybody! We promise :) </small>
             <div class="alert-feedback">
      Please provide a valid email.
             </div>
      </div>
         <div class="form-group center-block">
          <label for="inputName" class="form-labels">name</label>
           <input type="text" name="name"  pattern="[a-zA-Z]+" class="form-control form-
                control-lg" placeholder="Norman Geller" required="true" id="input--name">
           <div class="alert-feedback">
      Please input your name.
    </div>
        </div>
       <div class="form-group center-block">
       <label for="inputZipCode" class="form-labels"> Zip code</label>
       <input type="number" min="5" max="5" name="zip code" class="form-control form-control-lg" placeholder="US zip code" required="true" id="input--zip">
      <div class="alert-feedback">
      Please input your zip.
    </div>

Answer 1

我建议使用Parsley.js进行表单验证。基本用法：

首先包括jQuery（＆gt; = 1.8）和Parsley。
然后，只需使用$('form').parsley();
将required属性添加到您要验证的输入字段中。

根据您的代码，这是fiddle。

Answer 2

我相信您错误地激活了验证。使用上面的代码示例，通过JavaScript激活验证：$('#needs-validation').validator();

然后在你的hmtl中，只需将所需的模式添加到输入中。您需要添加样式或类以匹配bootstraps错误。

<section>
  <div class="container form-container col-lg-12">
    <form class="form_data" role="form" id="needs-validation" data-toggle="validator">
      <h1 class="text-center"> Contact us </h1>
      <div class="form-group center-block">
        <label for="input--email" class="form-labels">Email address</label>
        <input type="email" class="form-control form-control-lg" id="input--email" aria-describedby="emailHelp" placeholder="norman-geller@email.com" data-error="Please provide a valid email." required>
        <div class="help-block with-errors"></div>
        <small id="emailHelp" class="form-text text-muted">Please provide to us a valid email adress.We won't shared it with anybody! We promise :) </small>
      </div>
      <div class="form-group center-block">
        <label for="inputName" class="form-labels">name</label>
        <input type="text" name="name"  pattern="[a-zA-Z]+" data-pattern-error="Characters only." class="form-control form-
        control-lg" placeholder="Norman Geller" required id="input--name">
      <div class="help-block with-errors"></div>
      </div>
      <div class="form-group center-block">
        <label for="inputZipCode" class="form-labels"> Zip code</label>
        <input type="text" name="zip code" class="form-control form-control-lg" placeholder="US zip code" required id="input--zip" data-bv-integer="true" pattern="^[0-9]+$" data-pattern-error="Numbers only">
      <div class="help-block with-errors"></div>
      </div>
      <button type="submit">
      submit
      </button>
    </form>
  </div>
</section>

这是jsfiddle。我没有为您编写美国邮政编码验证，但这里是开始使用的好地方ZIP Code (US Postal Code) validation

如何验证使用bootstrap 3创建的表单？

2 个答案: