Bootstrap & Form Validation

2019-06-14 18:50发布

站内问答 / jQuery
1196 3 6

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>

3条回答
▲ chillily
2楼-- · 2019-06-14 19:10

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
   },
查看更多
0人赞 添加讨论(0) 举报
贼婆χ
3楼-- · 2019-06-14 19:17

You can create custom messages like this:

         messages: {
                   inputUsername: {
                              required : "Your message",
                              minlength : "Your message",
                              maxlength: "Your message"
                    },
                    inputEmail : {
                              required: "message"
                              ...
                     }
                  }

and so on...

查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
4楼-- · 2019-06-14 19:32

I think username and email in rules section of js script should be inputUsername and inputEmail - the ids of your inputs.

Hope it helps

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)