Eric Evans Eric Evans - 3 months ago 27
jQuery Question

Laravel Blade not loading jquery validate as intended

I'm trying to validate my form to show errors by my validation rules. I'm using blade template with laravel 5.2. Here's my code



$(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>





I have a login in the master and it work's fine, but I can't seem to get the login page to work as expected. Jquery is being loaded no errors but validation is not working.

Answer

You are showing two different <form></form> containers on the same page, both are using the same id="loginForm".

You absolutely cannot have a duplicate id on the same page... it's invalid HTML and will cause JavaScript issues since the second instance is usually ignored.

If you change them to a class, you can then have duplicates. HOWEVER, the jQuery Validate plugin will not like that... when it's declared on multiple form's, only the first match is initialized.

There is a workaround...

With class="loginForm" on both form containers, use a jQuery .each() to declare .validate() on all instances.

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