MinLength

MinLength

关注
发信
关注(28)粉丝(399)

Bootstrap&表单验证

本文介绍了Bootstrap&表单验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我第一次使用Bootstrap&试图使用jQuery做一些表单验证，但他们不工作。有人可以指出原因吗？
而不是基本的引导程序，我使用bootswatch.com的bootstrap主题之一... 

 < ;！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =utf-8> 
  < meta name =descriptioncontent => 
< meta name =keywordscontent => 
< title>注册页面< /标题> 
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css> 
< link rel =stylesheethref =./ stylesheets / bootstrap.min.css/> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css> 
< link rel =stylesheethref =./ stylesheets / defaultsignup.css/> 
< link rel =stylesheethref =./ stylesheets / signup.css/> 
< script src =// code.jquery.com/jquery-1.12.0.min.js\"></script> 
< script type =text / javascriptsrc =http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js>< /脚本> 
 
 
 此脚本不适用 - > 
< script> 
 $（）。ready（function（）{
 $（＃RegistrationForm）。validate（{
 rules：{
 username：{
 required：true ，
 minlength：4，
 maxlength：10 
}，
电子邮件：{
 required：true，
 email：true 
}， 
密码：{
 required：true，
 minlength：5 
}，
 confirmpassword：{
 required：true，
 minlength：5 ，
 equalTo：#password
}，
 highlight：function（el ement）{
 $（element）.closest（'。control-group'）。removeClass（'success'）。addClass（'error'）; 
}，
 success：function（element）{
 element 
 .text（'OK！'）。addClass（'valid'）
 .closest（'。控制组错误 '）addClass（' 成功） '）removeClass（'; 
} 
}）; 
}）;< / script> 
 
 
< / head> 
< body> 
 
 < form id =RegistrationFormclass =form-horizo​​ntal> 
< fieldset> 
<图例>注册< /图例> 
 < div class =form-group> 
< label for =inputNameclass =col-sm-4 control-label>用户名< / label> 
< div class =col-sm-4> 
< input type =textclass =form-controlid =inputUsernameplaceholder =你想知道什么？....> 
< / div> 
< / div> 
<！ -  EMAIL  - > 
< div class =form-group> 
< label for =inputEmailclass =col-sm-4 control-label> Email< / label> 
< div class =col-sm-4> 
< input type =emailclass =form-controlid =inputEmailplaceholder =相信我们！我们不会发送垃圾邮件！....> 
< / div> 
< / div> 
 < div class =form-group> 
< label for =inputPasswordclass =col-sm-4 control-label>密码< / label> 
< div class =col-sm-4> 
< input type =passwordclass =form-controlid =passwordplaceholder =Ssshhhh！....> 
< / div> 
< / div> 
 < div class =form-group> 
< label for =inputPassswordclass =col-sm-4 control-label>确认密码< / label> 
< div class =col-sm-4> 
< input type =passwordclass =form-controlid =confirmpasswordplaceholder =Once more ....> 
< / div> 
< / div> 
 < div class =form-group> 
< label class =col-sm-4 control-label> Gender< / label> 
< div class =col-sm-4> 
< div class =radio> 
< label> 
< input type =radioname =optionsRadiosid =optionsRadios1value =option1checked => 
你是一个螺柱吗？ 
< / label> 
< / div> 
< div class =radio> 
< label> 
< input type =radioname =optionsRadiosid =optionsRadios2value =option2> 
你是宝贝吗？ 
< / label> 
< / div> 
< / div> 
< / div> 
 < div class =form-group> 
< label for =selectclass =col-sm-4 control-label>安全问题< / label> 
< div class =col-sm-4> 
 < option>你小学的名字是什么< / option> 
< option>谁是你最喜欢的超级英雄？< / option> 
< option>谁是你最好的朋友？< / option> 
< / select> 
< / div> 
< / div> 
< div class =form-group> 
< label for =textAreaclass =col-sm-4 control-label> Textarea< / label> 
< div class =col-sm-4> 
 < div class =form-group> 
 < div class =col-lg-6 col-md-offset-2> 
< button type =resetclass =btn btn-default>重设< / button> 
< button type =submitclass =btn btn-primary btn-lg>提交< / button> 
< / div> 
< / div> 
 
< / fieldset> 
< / form> 
 < div class =row>< / div> 
< div class =row> 
< div class =col-xs-12> 
< div class =panel-footer> 
 
<！ - < p>& copy;公司|隐私|术语LT; / P>  - > 
< span>设计&由B.K.M开发©2016 
< p>用
手工制作< span class =doc-heart> 
< i class =glyphicon glyphicon-heart>< / i> 
< / span> 
和很多< span class =doc-coffee> 
< i class =fa fa-coffee>< / i> 
< / span> 
< / span> 
 
< / div> 
< / div> 
< / div> 
 
< / body> 
< / html>

$（）。ready（function（）{$（＃RegistrationForm ）.validate（{rules：{username：{required：true，minlength：4，maxlength：10}，email：{required：true，email：true}，密码：{required：true，minlength：5}，confirmpassword ：{required：true，minlength：5，equalTo：#password}，highlight：function（element）{$（element）.closest（'。control-group'）。removeClass（'success'）。addClass（' （'error'）。addClass（'valid'）.closest（'。control-group'）。removeClass（'error'）。addClass（'error'）;}成功：function（element）{element .text成功'）;}}，}）;}）; 
 < link href =https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.cssrel = stylesheet/>< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css =stylesheet/>< script src = https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script><script src =https://ajax.aspnetcdn.com/ajax /jquery.validate/1.12.0/jquery.validate.min.js\"></script><!--开始表单界面。 - >< form id =RegistrationFormclass =form-horizo​​ntal> <字段集> <图例>注册< /图例> <！ - 用户名！ - > < div class =form-group> < label for =inputNameclass =col-sm-4 control-label>用户名< / label> < div class =col-sm-4> < input type =textclass =form-controlid =inputUsernameplaceholder =你想知道什么？....> < / DIV> < / DIV> <！ - 电子邮件 - > < div class =form-group> < label for =inputEmailclass =col-sm-4 control-label> Email< / label> < div class =col-sm-4> < input type =emailclass =form-controlid =inputEmailplaceholder =相信我们！我们不会发送垃圾邮件！....> < / DIV> < / DIV> <！ - 密码 - > < div class =form-group> < label for =inputPasswordclass =col-sm-4 control-label>密码< / label> < div class =col-sm-4> < input type =passwordclass =form-controlid =passwordplaceholder =Ssshhhh！....> < / DIV> < / DIV> <！ - 密码确认 - > < div class =form-group> < label for =inputPassswordclass =col-sm-4 control-label>确认密码< / label> < div class =col-sm-4> < input type =passwordclass =form-controlid =confirmpasswordplaceholder =Once more ....> < / DIV> < / DIV> <！ -  GENDER CHOICE RADIO BUTTON  - > < div class =form-group> < label class =col-sm-4 control-label> Gender< / label> < div class =col-sm-4> < div class =radio> <标签> < input type =radioname =optionsRadiosid =optionsRadios1value =option1checked =>你是一个stud？ < /标签> < / DIV> < div class =radio> <标签> < input type =radioname =optionsRadiosid =optionsRadios2value =option2>你是宝贝吗？ < /标签> < / DIV> < / DIV> < / DIV> <！ - 安全问题和选择 - > < div class =form-group> < label for =selectclass =col-sm-4 control-label>安全问题< / label> < div class =col-sm-4> < select class =form-controlid =select> < option>您小学的名称是什么< / option> < option>您最喜欢的超级英雄是谁？< / option> < option>谁是你最好的朋友？< / option> < /选择> < / DIV> < / DIV> < div class =form-group> < label for =textAreaclass =col-sm-4 control-label> Textarea< / label> < div class =col-sm-4> < textarea class =form-controlrows =1id =textArea>< / textarea> < div class =form-group> <！ - 按钮回滚& PROCEED  - > < div class =col-lg-6 col-md-offset-2> < button type =resetclass =btn btn-default>重设< / button> < button type =submitclass =btn btn-primary btn-lg>提交< / button> < / DIV> < / DIV> < / DIV> < / DIV> < / fieldset>< / form><！ -  Footer  - >< div class =row>< / div>< div class =row> < div class =col-xs-12> < div class =panel-footer> <！ - < p为H.;&安培;副本;公司|隐私|术语LT; / P>  - > <跨度>设计&由B.K.M开发©2016< p>用< span class =doc-heart手工制作> < i class =glyphicon glyphicon-heart>< / i> < /跨度>和很多< span class =doc-coffee> < i class =fa fa-coffee>< / i> < /跨度> < /跨度> < / DIV> < / div>< / div>

解决方案



pre> < input type =textclass =form-controlid =inputUsernamename =inputUsernameplaceholder =你想知道什么？.... >


规则：{
inputUsername：{
required：true，
minlength：4，
maxlength：10
} ，


I am using Bootstrap for the first time & trying to do some form validation using jQuery but they aren't working. Can somebody point out the reason?Instead of basic bootstrap, I am using one of the themes of bootstrap from bootswatch.com... 

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
        <meta name="dcterms.created" content="Sat, 05 Mar 2016 11:40:35 GMT">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Sign Up Page</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="./stylesheets/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="./stylesheets/defaultsignup.css" />
        <link rel="stylesheet" href="./stylesheets/signup.css" />
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>


        <!-- jQuery Script to validate the form constraints.
             THIS SCRIPT DOESNT WORK-->
        <script>
        $().ready(function () {
    $("#RegistrationForm").validate({
                    rules: {
                        username: {
                                  required : true,
                                  minlength : 4,
                                  maxlength: 10
                        },
                        email: {
                                  required: true,
                                  email:true
                        },
                        password: {
                                  required: true,
                                  minlength: 5
                        },
                        confirmpassword: {
                                  required: true,
                                  minlength: 5,
                                  equalTo: "#password"
                        },
                    highlight: function(element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
      },
      success: function(element) {
        element
        .text('OK!').addClass('valid')
        .closest('.control-group').removeClass('error').addClass('success');
      }
     });
    });</script>


        </head>
      <body>

                <!-- Starting of the form interface. -->
                 <form id = "RegistrationForm" class="form-horizontal">
      <fieldset>
        <legend>SIGN UP</legend>
        <!-- USERNAME! -->
        <div class="form-group">
          <label for="inputName" class="col-sm-4 control-label">Username</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" id="inputUsername" placeholder="What you wanna know as?...."  >
          </div>
        </div>
        <!-- EMAIL -->
        <div class="form-group">
          <label for="inputEmail" class="col-sm-4 control-label">Email</label>
          <div class="col-sm-4">
            <input type="email" class="form-control" id="inputEmail" placeholder="Trust us! We won't spam!...." >
          </div>
        </div>
        <!-- PASSWORD -->
        <div class="form-group">
          <label for="inputPassword" class="col-sm-4 control-label">Password</label>
          <div class="col-sm-4">
            <input type="password" class="form-control" id="password"  placeholder="Ssshhhh!...." >
          </div>
        </div>
        <!-- PASSWORD CONFIRMATION -->
         <div class="form-group">
          <label for="inputPasssword" class="col-sm-4 control-label">Confirm Password</label>
          <div class="col-sm-4">
            <input type="password" class="form-control" id="confirmpassword" placeholder="Once more...." >
          </div>
        </div>
        <!-- GENDER CHOICE RADIO BUTTON -->
        <div class="form-group">
          <label class="col-sm-4 control-label">Gender</label>
          <div class="col-sm-4">
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
                Are you a stud?
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Are you a babe?
              </label>
            </div>
          </div>
        </div>
        <!-- SECURITY QUESTION  AND THE CHOICES-->
        <div class="form-group">
          <label for="select" class="col-sm-4 control-label">Security Question</label>
          <div class="col-sm-4">
            <select class="form-control" id="select">
              <option>What is the name of your Primary School</option>
              <option>Who is your favorite superhero?</option>
              <option>Who is your best friend?</option>
            </select>
          </div>
        </div>
    <div class="form-group">
          <label for="textArea" class="col-sm-4 control-label">Textarea</label>
          <div class="col-sm-4">
            <textarea class="form-control" rows="1" id="textArea"></textarea>
            <div class="form-group">
            <!-- BUTTONS TO ROLLBACK & PROCEED -->
          <div class="col-lg-6 col-md-offset-2">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
          </div>
        </div>

      </fieldset>
    </form>
    <!-- Footer -->
    <div class="row"></div>
        <div class = "row">
        <div class="col-xs-12">
        <div class="panel-footer">

            <!--<p>&copy; Company | Privacy | Terms</p>-->
            <span> Designed & Developed by B.K.M © 2016
            <p>Handcrafted with
        <span class="doc-heart">
         <i class="glyphicon glyphicon-heart"></i>
        </span>
        and a lot of <span class="doc-coffee">
        <i class="fa fa-coffee"></i>
        </span>
            </span>

          </div>
        </div>
        </div>

      </body>
    </html>


 $().ready(function() {
   $("#RegistrationForm").validate({
     rules: {
       username: {
         required: true,
         minlength: 4,
         maxlength: 10
       },
       email: {
         required: true,
         email: true
       },
       password: {
         required: true,
         minlength: 5
       },
       confirmpassword: {
         required: true,
         minlength: 5,
         equalTo: "#password"
       },
       highlight: function(element) {
         $(element).closest('.control-group').removeClass('success').addClass('error');
       },
       success: function(element) {
         element
           .text('OK!').addClass('valid')
           .closest('.control-group').removeClass('error').addClass('success');
       }
     },
   });
 });
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<!-- Starting of the form interface. -->
<form id="RegistrationForm" class="form-horizontal">
  <fieldset>
    <legend>SIGN UP</legend>
    <!-- USERNAME! -->
    <div class="form-group">
      <label for="inputName" class="col-sm-4 control-label">Username</label>
      <div class="col-sm-4">
        <input type="text" class="form-control" id="inputUsername" placeholder="What you wanna know as?....">
      </div>
    </div>
    <!-- EMAIL -->
    <div class="form-group">
      <label for="inputEmail" class="col-sm-4 control-label">Email</label>
      <div class="col-sm-4">
        <input type="email" class="form-control" id="inputEmail" placeholder="Trust us! We won't spam!....">
      </div>
    </div>
    <!-- PASSWORD -->
    <div class="form-group">
      <label for="inputPassword" class="col-sm-4 control-label">Password</label>
      <div class="col-sm-4">
        <input type="password" class="form-control" id="password" placeholder="Ssshhhh!....">
      </div>
    </div>
    <!-- PASSWORD CONFIRMATION -->
    <div class="form-group">
      <label for="inputPasssword" class="col-sm-4 control-label">Confirm Password</label>
      <div class="col-sm-4">
        <input type="password" class="form-control" id="confirmpassword" placeholder="Once more....">
      </div>
    </div>
    <!-- GENDER CHOICE RADIO BUTTON -->
    <div class="form-group">
      <label class="col-sm-4 control-label">Gender</label>
      <div class="col-sm-4">
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">Are you a stud?
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Are you a babe?
          </label>
        </div>
      </div>
    </div>
    <!-- SECURITY QUESTION  AND THE CHOICES-->
    <div class="form-group">
      <label for="select" class="col-sm-4 control-label">Security Question</label>
      <div class="col-sm-4">
        <select class="form-control" id="select">
          <option>What is the name of your Primary School</option>
          <option>Who is your favorite superhero?</option>
          <option>Who is your best friend?</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="textArea" class="col-sm-4 control-label">Textarea</label>
      <div class="col-sm-4">
        <textarea class="form-control" rows="1" id="textArea"></textarea>
        <div class="form-group">
          <!-- BUTTONS TO ROLLBACK & PROCEED -->
          <div class="col-lg-6 col-md-offset-2">
            <button type="reset" class="btn btn-default">Reset</button>
            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
</form>
<!-- Footer -->
<div class="row"></div>
<div class="row">
  <div class="col-xs-12">
    <div class="panel-footer">

      <!--<p>&copy; Company | Privacy | Terms</p>-->
      <span> Designed &amp; Developed by B.K.M © 2016
            <p>Handcrafted with
        <span class="doc-heart">
         <i class="glyphicon glyphicon-heart"></i>
        </span>
      and a lot of <span class="doc-coffee">
        <i class="fa fa-coffee"></i>
        </span>
      </span>

    </div>
  </div>
</div>

解决方案

You have to add "name" attribute to your input fields on which you want validation to work and the "name" attribute should match the rules.

<input type="text" class="form-control" id="inputUsername" name="inputUsername" placeholder="What you wanna know as?...."  >


rules: {
         inputUsername: {
            required: true,
            minlength: 4,
            maxlength: 10
   },

这篇关于Bootstrap&amp;表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-21 06:41
Powered by LMLPHP ©2024 MinLength 0.048181