ブートストラップとフォームの検証

-2

初めてブートストラップを使用しています。& jQueryを使用してフォームの検証を行っていますが、動作していません。誰かが理由を指摘できますか？代わりに、基本的なブートストラップの、私は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>

出典

2016-03-29 BWashishtha

...

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

など：

は、あなたがこのようなカスタムメッセージを作成することができ、それは

出典

2016-03-29 21:16:23 koolhuman

からブートストラップのテーマの一つを使用しています私は思うのjsスクリプトの規則セクションで、ユーザー名と電子メールべきbe inputUsernameとinputEmail - 入力のIDです。あなたは上の入力フィールドに「名前」属性を追加する必要が

出典

2016-03-29 17:55:03 Raf

ありがとうございました。 – BWashishtha

愚かな間違いは初心者です。私が必要であれば、同じスクリプトでいくつかの警告メッセージを表示するように教えてもらえますか？ – BWashishtha

を役に立てば幸い検証が機能し、 "name"属性がルールと一致する必要があります。

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


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

出典

2016-03-29 18:06:04 Raf

ブートストラップとフォームの検証

答えて

関連する問題