0
유효성 검사 규칙에 따라 오류를 표시하기 위해 양식의 유효성을 검사하려고합니다. laravel 5.2와 함께 블레이드 템플릿을 사용하고 있습니다. 여기 마스터에 로그인을하고 작업의 좋은,하지만 예상대로 로그인 페이지 작동시킬 수없는 것 내 코드Laravel Blade가 jquery를 로딩하지 않음
$(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>
\t <title>Laravel</title>
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <link href="http://etl.local/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
\t <link href="http://etl.local/assets/css/app.css" rel="stylesheet" type="text/css">
\t <link href="https://fonts.googleapis.com/css?family=Mirza" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
\t <div class="container">
\t \t \t \t <div class="navbar-header">
\t \t \t <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
\t \t \t \t <span class="sr-only toggle_nav">Toggle navigation</span>
\t \t \t \t <span class="icon-bar"></span>
\t \t \t \t <span class="icon-bar"></span>
\t \t \t \t <span class="icon-bar"></span>
\t \t \t </button>
\t \t \t <a class="navbar-brand" href="/">Eric's Tech List</a>
\t \t </div>
\t \t \t </div> <!-- end of nav container-->
</nav> <!-- End of nav-->
<div class="modal fade" id="login_modal" role="dialog">
\t <div class="modal-dialog modal-lg">
\t \t <div class="modal-content">
\t \t \t <div class="modal-header">
\t \t \t \t <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
\t \t \t \t <h4 class="modal-title" id="myModalLabel">Login</h4>
\t \t \t </div>
\t \t \t <div class="modal-body">
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-xs-6">
\t \t \t \t \t \t <div class="well">
\t \t \t \t \t \t \t <form id="loginForm" method="POST" action="./handleLogin" novalidate="novalidate" role="form">
\t \t \t \t \t \t \t \t <input type="hidden" name="_token" value="yvXKRQ5C15cxBpL6Y186vf9aeEZZxm8UVNxI1kt4">
\t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t <label for="email" class="control-label">Email/Username</label>
\t \t \t \t \t \t \t \t \t <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">
\t \t \t \t \t \t \t \t \t <span class="help-block"></span>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div class="form-group">
\t \t \t \t \t \t \t \t \t <label for="password" class="control-label">Password</label>
\t \t \t \t \t \t \t \t \t <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">
\t \t \t \t \t \t \t \t \t <span class="help-block"></span>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <div id="loginMsg"></div>
\t \t \t \t \t \t \t \t <div class="checkbox">
\t \t \t \t \t \t \t \t \t <label>
\t \t \t \t \t \t \t \t \t \t <input type="checkbox" name="remember" id="remember"> Remember login
\t \t \t \t \t \t \t \t \t </label>
\t \t \t \t \t \t \t \t \t <p class="help-block">(if this is a private computer)</p>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t <button type="submit" class="btn btn-primary btn-block">Login</button>
\t \t \t \t \t \t \t \t <a href="/forgot/" class="btn btn-primary btn-block">Help to login</a>
\t \t \t \t \t \t \t </form>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-xs-6">
\t \t \t \t \t \t <p class="lead">Register now for <span class="text-success">FREE</span></p>
\t \t \t \t \t \t <ul class="list-unstyled" style="line-height: 2">
\t \t \t \t \t \t \t <li><span class="fa fa-check text-success"></span> See all your orders</li>
\t \t \t \t \t \t \t <li><span class="fa fa-check text-success"></span> Fast re-order</li>
\t \t \t \t \t \t \t <li><span class="fa fa-check text-success"></span> Save your favorites</li>
\t \t \t \t \t \t \t <li><span class="fa fa-check text-success"></span> Fast checkout</li>
\t \t \t \t \t \t \t <li><span class="fa fa-check text-success"></span> Get a gift <small>(only new customers)</small></li>
\t \t \t \t \t \t \t <li><a href="/read-more/"><u>Read more</u></a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t \t <p><a href="http://etl.local/register" class="btn btn-primary btn-block">Yes please, register now!</a></p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t </div>
\t </div>
</div>
</div> <!-- End of modal-->
<div class="container">
\t \t <form class="form-horizontal" action="" method="POST" id="loginForm">
\t \t <fieldset>
\t \t \t <div id="legend">
\t \t \t \t <legend class="">Register</legend>
\t \t \t </div>
\t \t \t <div class="control-group">
\t \t \t \t <!-- Username -->
\t \t \t \t <label class="control-label" for="username">Email</label>
\t \t \t \t <div class="controls">
\t \t \t \t \t <input type="text" id="email" name="email" placeholder="" class="input-xlarge">
\t \t \t \t \t <p class="help-block"></p>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="control-group">
\t \t \t \t <!-- Password-->
\t \t \t \t <label class="control-label" for="password">Password</label>
\t \t \t \t <div class="controls">
\t \t \t \t \t <input type="password" id="password" name="password" placeholder="" class="input-xlarge">
\t \t \t \t \t <p class="help-block">Password should be at least 4 characters</p>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="control-group">
\t \t \t \t <!-- Password -->
\t \t \t \t <label class="control-label" for="password_confirm">Password (Confirm)</label>
\t \t \t \t <div class="controls">
\t \t \t \t \t <input type="password" id="password_confirm" name="password_confirm" placeholder="" class="input-xlarge">
\t \t \t \t \t <p class="help-block">Please confirm password</p>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="control-group">
\t \t \t \t <!-- Button -->
\t \t \t \t <div class="controls">
\t \t \t \t \t <button class="btn btn-success">Register</button>
\t \t \t \t </div>
\t \t \t </div>
\t \t </fieldset>
\t </form>
</div>
<footer class="footer">
\t <div class="container">
\t \t <p>Copyright © ericstechlist.com <script> document.write(new Date().getFullYear())</script>2016 All Rights Reserved</p>
\t </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는 오류없이로드되지만 유효성 검사가 작동하지 않습니다.
이 SO 페이지 내에서 실행할 수없는 코드 스 니펫 기능은 사용하지 마십시오. 이것은 PHP 또는 서버 측 코드가 아닌 자 급식 JavaScript/HTML/CSS 데모 용입니다. 감사. 편집 됨. – Sparky
jQuery/JavaScript는 서버 측 프레임 워크에 대해 신경 쓰지 않습니다. JavaScript는 관련성 있고 올바른 HTML 마크 업을 생성하는 데만 사용됩니다. 즉, 브라우저에서 *** 렌더링 된 HTML 코드를 검사하여 PHP 대신 여기에 게시하십시오. 또한 브라우저의 JavaScript 콘솔을 사용하여 오류를 찾으십시오. – Sparky
그렇지 않으면 여기에 게시 한 코드가 작동합니다. http://jsfiddle.net/5mmyq7c0/ ~ *** 렌더링 된 *** HTML 마크 업을 검사하고 JavaScript 콘솔에서 오류를 확인해야합니다. . 아마도 파일에 포함 된 파일이 손상되었을 수도 있습니다 ... 그렇다면 여기에서도 볼 수 없습니다. – Sparky