我正在尝试验证我的表单以通过验证规则显示错误。我正在使用带有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>
我在主人登录并且工作正常，但我似乎无法使登录页面按预期工作。 Jquery正在加载没有错误，但验证不起作用。
答案 0 :(得分：0)
您在同一页面上展示了两个不同的<form></form>容器，两个容器都使用相同的id="loginForm"。
您绝对不能在同一页面上复制id ...它的HTML无效并且会导致JavaScript问题，因为通常会忽略第二个实例。
如果您将其更改为class，则可以重复。但是，jQuery Validate插件不会那样...当它在多个form上声明时，只会初始化第一个匹配。
有一种解决方法......
在class="loginForm"个容器上使用form，使用jQuery .each()在所有实例上声明.validate()。
$('.loginForm').each(function() {
$(this).validate({
.....
});
});