I am working on a Laravel project and there is a login modal inside the project which logs the user in but if the user enters invalid data then I want the modal to pop up automatically with the error message. I am using this script code but it is not working.No J code is working on the header.blade.php file
<script type="text/javascript">
@if (count($errors) > 0)
$('#login-modal').modal('show');
@endif
</script>
My header.blade.php File is:
<header id="header" class="header-scroll top-header headrom">
<!-- .navbar -->
<nav class="navbar navbar-dark">
<div class="container tog">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">☰</button>
<a class="navbar-brand" href="{{url('/')}}"> <img class="img-rounded" src="images/logo.png" alt=""> </a>
<ul class="nav navbar-nav" id="location-top">
<li class="nav-item dropdown" id="nav-float">
<a style="color: white;" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cutlery" aria-hidden="true"></i> FEEL LIKE EATING
</a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="food_results.html"><img src="images/bbq.png"> BB.Q</a>
<a class="dropdown-item" href="map_results.html"><img src="images/beef.png"> Beef Roast</a>
<a class="dropdown-item" href="food_results.html"><img src="images/carrot.png"> Carrot Juice</a>
<a class="dropdown-item" href="map_results.html"><img src="images/cheese-burger.png"> Cheese Burger</a>
<a class="dropdown-item" href="food_results.html"><img src="images/turkey.png"> Chicken Roast</a>
<a class="dropdown-item" href="map_results.html"><img src="images/noodles.png"> Chinese Soup</a>
<a class="dropdown-item" href="food_results.html"><img src="images/frappe.png"> Cold Coffee</a>
</div>
</li>
<li class="nav-item dropdown" id="nav-float-2"> <a style="color: white;" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-map-marker" aria-hidden="true"></i> CHOOSE LOCATION </a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="food_results.html">Location 1</a><a class="dropdown-item" href="map_results.html">Location 2</a>
<a class="dropdown-item" href="food_results.html">Location 3</a>
<a class="dropdown-item" href="map_results.html">Location 4</a>
<a class="dropdown-item" href="food_results.html">Location 5</a>
<a class="dropdown-item" href="map_results.html">Location 6</a>
<a class="dropdown-item" href="food_results.html">Location 7</a>
<a class="dropdown-item" href="map_results.html">Location 8</a>
</div>
</li>
<li class="nav-item dropdown" id="nav-float-2"> <a style="color: white;" class="nav-link dropdown-toggle btn btn-danger warning-btn" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars" aria-hidden="true"></i> Menu </a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="{{url('/chefs')}}"><img src="images/chef.png"> Chefs</a>
<a class="dropdown-item" href="#"><img src="images/about-us.png"> About Us</a>
<a class="dropdown-item" href="#"><img src="images/letter.png"> Contact Us</a>
<a class="dropdown-item" href="#"><img src="images/question.png"> FAQ's</a>
</div>
</li>
</ul>
<div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
<ul class="nav navbar-nav float-lg-right">
@guest
<li class="nav-item"> <a class="nav-link active" data-toggle="modal" data-target="#login-modal" href="#"><i class="fa fa-user-o" aria-hidden="true"></i>LOGIN / REGISTER</a> </li>
<li class="nav-item"> <a style="color: white;" class="nav-link btn btn-danger" href="#">REGISTER AS A CHEF</a> </li>
@else
<li class="dropdown">
<a style="border-radius: 20px;" href="#" class="dropdown-toggle btn btn-danger" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="drop-outside"><a href="/customer/home">
<i class="fa fa-user" aria-hidden="true"></i>
View Profile
</a>
</li>
<li class="drop-outside">
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="fa fa-sign-out" aria-hidden="true"></i>
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<!-- /.navbar -->
</header>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<img class="img-circle center-block" id="img_logo" src="images/circle-logo.png">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="fa fa-times fa-2x" aria-hidden="true"></span>
</button>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Login Form -->
<form id="login-form" method="POST" action="{{ route('login') }}">
<div class="modal-body">
<div id="div-login-msg">
<div id="icon-login-msg" class="fa fa-chevron-right"></div>
<span id="text-login-msg">Login to Continue..</span>
</div>
<br>
{{ csrf_field() }}
<input id="login_username" name="email" class="form-control" type="email" placeholder="Email" required>
<input id="login_password" name="password" class="form-control" type="password" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<br>
@if ($errors->has('email'))
<script>
$(window).on('load',function(){
$('#login-modal').modal('show');
});
</script>
<span class="help-block">
<strong class="text-danger">{{ $errors->first('email') }}</strong>
</span>
@endif
@if ($errors->has('password')){
<script>
$(window).on('load',function(){
$('#login-modal').modal('show');
});
</script>
<span class="help-block">
<strong class="text-danger">{{ $errors->first('password') }}</strong>
</span>
@endif
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block login-btn">Login</button>
</div>
<div><p style="text-align: center; font-weight: bold; padding-top: 15px;">OR</p></div>
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
</div>
<div>
<button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
<button id="login_register_btn" type="button" class="btn btn-link pull-right">Register</button>
</div>
</div>
</form>
<!-- End # Login Form -->
<!-- Begin | Lost Password Form -->
<form id="lost-form" style="display:none;">
<div class="modal-body">
<div id="div-lost-msg">
<div id="icon-lost-msg" class="fa fa-chevron-right"></div>
<span id="text-lost-msg">Enter your email</span>
</div>
<input id="lost_email" class="form-control" type="text" placeholder="E-Mail" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block">Send</button>
</div>
<div>
<button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="lost_register_btn" type="button" class="btn btn-link pull-right">Register</button>
</div>
</div>
</form>
<!-- End | Lost Password Form -->
<!-- Begin | Register Form -->
<form id="register-form" style="display:none;" method="POST" action="{{ route('register') }}">
{{ csrf_field() }}
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="fa fa-chevron-right"></div>
<span id="text-register-msg">Register an account.</span>
</div>
<input id="name" name="name" class="form-control" type="text" placeholder="Username" required>
<input id="email" class="form-control" name="email" type="email" placeholder="E-Mail" required>
<input id="password" class="form-control" name="password"type="password" placeholder="Password" required>
<input id="password-confirm" class="form-control" name="password_confirmation" type="password" placeholder="Confirm Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block">Register</button>
</div>
<div>
<button id="register_login_btn" type="button" class="btn btn-link pull-right">Log In</button>
</div>
</div>
</form>
<!-- End | Register Form -->
</div>
<!-- End # DIV Form -->
</div>
</div>
</div>
<!-- END # MODAL LOGIN -->
<script type="text/javascript">
@if (count($errors) > 0)
$('#login-modal').modal('show');
alert("Hello");
@endif
</script>
I am new to travel and I don't know what's wrong.Any help will be appreciated.
