jQueryの検証作業ではない（jqueryvalidation.org）

Question

私はjquery.validate.jsが、その下の

フォーム

<form id="login_form" name="login_form" method="post" action="" enctype="multipart/form-data" > 
    <div class="form-group"> 
     <label for="user_email">Email address</label> 
     <input class="form-control" id="user_email" name="user_email" type="email" placeholder="Enter email"> 
    </div> 
    <div class="form-group"> 
     <label for="user_password">Password</label> 
     <input class="form-control" id="user_password" id="user_password" type="password" placeholder="Password"> 
    </div> 
    <input type="submit" name="submit" id="submit" value="Login" class="btn btn-primary btn-block" /> 
</form> 

そして働いていないしている使用してJavascriptを/ jQueryの

を検証しようとすると、フォームを持っています

<!-- Bootstrap core JavaScript--> 
<script src="vendor/jquery/jquery.min.js"></script> 
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 
<!-- Core plugin JavaScript--> 
<script src="vendor/jquery-easing/jquery.easing.min.js"></script> 

<script src="jquery_validation_1_17_0/dist/jquery.validate.js"></script> 
<script type="text/javascript"> 
    $().ready(function() { 
     $("#login_form").validate({ 
      rules: { 
       exampleInputEmail1: { 
        required: true, 
        email: true 
       }, 
       exampleInputPassword1: { 
        required: true 
       } 
      }, 
      messages: { 
       email: "Please enter a valid email address", 
       password: { 
        required: "Please provide a password", 
        minlength: "Your password must be at least 5 characters long" 
       } 
      } 
     }); 
    }); 
</script> 

なぜ検証部分が機能していないのかわかりません。

私はフォームにnovalidateを追加するようなものを試しましたが、私はその機能が開始されていないと思います。

助けてください。

Answer 1

ruleの定義に問題がありました。

フィールドにはnameという属性を付けることができます。

入力フィールドuser_passwordも消去されました。

私のスニペットを見てください！

$(document).ready(function() { 
 
    $("#login_form").validate({ 
 
    rules: { 
 
     user_email: { 
 
     required: true, 
 
     email: true 
 
     }, 
 
     user_password: { 
 
     required: true 
 
     } 
 
    }, 
 
    messages: { 
 
     email: "Please enter a valid email address", 
 
     password: { 
 
     required: "Please provide a password", 
 
     minlength: "Your password must be at least 5 characters long" 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Bootstrap core JavaScript--> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script> 
 

 

 
<form id="login_form" name="login_form" method="post" action="" enctype="multipart/form-data"> 
 
    <div class="form-group"> 
 
    <label for="user_email">Email address</label> 
 
    <input class="form-control" name="user_email" id="user_email" type="email" placeholder="Enter email"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="user_password">Password</label> 
 
    <input class="form-control" name="user_password" id="user_password" type="password" placeholder="Password"> 
 
    </div> 
 
    <input type="submit" name="submit" id="submit" value="Login" class="btn btn-primary btn-block" /> 
 
</form>