Laravel Blade 未按预期加载 jquery 验证答案

【问题标题】：Laravel Blade not loading jquery validate as intendedLaravel Blade 未按预期加载 jquery 验证
【发布时间】：2016-12-15 21:43:18
【问题描述】：

我正在尝试验证我的表单以通过我的验证规则显示错误。我在 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，没有错误，但验证不起作用。

【问题讨论】：

请不要将代码片段功能用于无法在此 SO 页面中运行的任何内容。它仅适用于自包含的 JavaScript/HTML/CSS 演示......而不是 PHP 或服务器端代码。谢谢。已编辑。
jQuery/JavaScript 不关心你的服务器端框架。 JavaScript 只关心您生成相关且正确的 HTML 标记。话虽如此，请使用您的浏览器检查 rendered HTML 代码并将其发布到此处而不是您的 PHP。还可以使用浏览器的 JavaScript 控制台查找错误。
否则，您在此处发布的代码可以正常工作：jsfiddle.net/5mmyq7c0 ~ 您将不得不检查您的 rendered HTML 标记，并检查您的 JavaScript 控制台是否有错误。也许您的文件包含已损坏...如果是这种情况，我们在这里也看不到。
我在控制台中查看它没有抛出任何错误。当我尝试从视图源转到每个 javascript 文件时，它会转到该文件的源。不太明白为什么它在这里不起作用，而是在我的主文件中使用相同的输入字段和具有相同 id 的表单登录
在同一页面上是否有两个 <form></form> 容器使用相同的 id？

标签： jquery jquery-validate laravel-5.2 laravel-blade

【解决方案1】：

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

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

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

有一个解决方法...

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

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

【讨论】：