Laravel Blade 未加载 jquery 按预期进行验证

Question

我正在尝试验证我的表单以根据我的验证规则显示错误。我正在使用 blade 模板和 laravel 5.2。这是我的代码

$(document).ready(function () {
    $('#loginForm').validate({
        rules : {
            email : {
                required : true,
                email : true
            },
            password : {
                required : true
            }
        },
        messages : {
            email : {
                required : '<span class="alert-danger">Email is a required field.</span>',
                email : '<span class="alert-danger">Please enter a valid Email.</span>'
            },
            password : {
                required : '<span class="alert-danger">Password is a required field.</span>'
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<html><head>
 <title>Laravel</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link href="http://etl.local/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
 <link href="http://etl.local/assets/css/app.css" rel="stylesheet" type="text/css">
 <link href="https://fonts.googleapis.com/css?family=Mirza" rel="stylesheet" type="text/css">

</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
 <div class="container">
    <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
    <span class="sr-only toggle_nav">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="/">Eric's Tech List</a>
  </div>
   </div> <!-- end of nav container-->
</nav> <!-- End of nav-->
<div class="modal fade" id="login_modal" role="dialog">
 <div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Login</h4>
   </div>
   <div class="modal-body">
    <div class="row">
     <div class="col-xs-6">
      <div class="well">
       <form id="loginForm" method="POST" action="./handleLogin" novalidate="novalidate" role="form">
        <input type="hidden" name="_token" value="yvXKRQ5C15cxBpL6Y186vf9aeEZZxm8UVNxI1kt4">
        <div class="form-group">
         <label for="email" class="control-label">Email/Username</label>
         <input type="text" class="form-control" name="email" value="" required="" placeholder="Please enter your email" onblur="this.placeholder = 'Please enter your email'" onfocus="this.placeholder= ''" aria-required="true">
         <span class="help-block"></span>
        </div>
        <div class="form-group">
         <label for="password" class="control-label">Password</label>
         <input type="password" class="form-control" name="password" value="" required="" placeholder="Please enter your password" onblur="this.placeholder = 'Please enter your password'" onfocus="this.placeholder= ''" aria-required="true">
         <span class="help-block"></span>
        </div>
        <div id="loginMsg"></div>
        <div class="checkbox">
         <label>
          <input type="checkbox" name="remember" id="remember"> Remember login
         </label>
         <p class="help-block">(if this is a private computer)</p>
        </div>
        <button type="submit" class="btn btn-primary btn-block">Login</button>
        <a href="/forgot/" class="btn btn-primary btn-block">Help to login</a>
       </form>
      </div>
     </div>
     <div class="col-xs-6">
      <p class="lead">Register now for <span class="text-success">FREE</span></p>
      <ul class="list-unstyled" style="line-height: 2">
       <li><span class="fa fa-check text-success"></span> See all your orders</li>
       <li><span class="fa fa-check text-success"></span> Fast re-order</li>
       <li><span class="fa fa-check text-success"></span> Save your favorites</li>
       <li><span class="fa fa-check text-success"></span> Fast checkout</li>
       <li><span class="fa fa-check text-success"></span> Get a gift <small>(only new customers)</small></li>
       <li><a href="/read-more/"><u>Read more</u></a></li>
      </ul>
      <p><a href="http://etl.local/register" class="btn btn-primary btn-block">Yes please, register now!</a></p>
     </div>
    </div>
  </div>
 </div>
</div>
</div> <!-- End of modal-->
<div class="container">
  <form class="form-horizontal" action="" method="POST" id="loginForm">
  <fieldset>
   <div id="legend">
    <legend class="">Register</legend>
   </div>
   <div class="control-group">
    <!-- Username -->
    <label class="control-label" for="username">Email</label>
    <div class="controls">
     <input type="text" id="email" name="email" placeholder="" class="input-xlarge">
     <p class="help-block"></p>
    </div>
   </div>

   <div class="control-group">
    <!-- Password-->
    <label class="control-label" for="password">Password</label>
    <div class="controls">
     <input type="password" id="password" name="password" placeholder="" class="input-xlarge">
     <p class="help-block">Password should be at least 4 characters</p>
    </div>
   </div>

   <div class="control-group">
    <!-- Password -->
    <label class="control-label" for="password_confirm">Password (Confirm)</label>
    <div class="controls">
     <input type="password" id="password_confirm" name="password_confirm" placeholder="" class="input-xlarge">
     <p class="help-block">Please confirm password</p>
    </div>
   </div>

   <div class="control-group">
    <!-- Button -->
    <div class="controls">
     <button class="btn btn-success">Register</button>
    </div>
   </div>
  </fieldset>
 </form>
</div>
<footer class="footer">
 <div class="container">
  <p>Copyright © ericstechlist.com <script> document.write(new Date().getFullYear())</script>2016 All Rights Reserved</p>
 </div>
</footer>
<script src="http://etl.local/assets/js/bootstrap.js"></script>
<script src="http://etl.local/assets/js/app.js"></script>
<script src="http://etl.local/assets/js/login-submit-auth.js"></script>



</body></html>

我在 master 中有一个登录并且工作正常，但我似乎无法让登录页面按预期工作。 Jquery 正在加载，没有错误，但验证不工作。

Answer 1

您在同一页面上显示了两个不同的 <form></form> 容器，它们都使用相同的 id="loginForm"。

您绝对不能在同一页面上有重复的 id...它是无效的 HTML 并且会导致 JavaScript 问题，因为第二个实例通常会被忽略。

如果将它们更改为 class，则可以重复。然而，jQuery Validate 插件不会喜欢这样......当它在多个 form 上声明时，只有 first 匹配被初始化。

有一个解决方法...

在两个 form 容器上使用 class="loginForm"，使用 jQuery .each() 在所有实例上声明 .validate()。

$('.loginForm').each(function() {
    $(this).validate({
        .....
    });
});

Laravel Blade 未加载 jquery 按预期进行验证

Laravel Blade not loading jquery validate as intended

jquery

jquery-validate

laravel-5.2

laravel-blade