How to validate modal form on click with Ajax in Laravel - ajax

Question

I have a modal form for login in Laravel project. When I enter false data and click to the button "Log in" the page refreshing and modal is closing. I can see errors only when I open modal again. It's not user-friendly. I want to validate modal with Ajax and show errors if something goes wrong without refreshing page
This is my modal
<form action="/login" method="post">
#csrf
<div class="sign-in-wrapper">
Login with Facebook
Login with Google
<div class="divider"><span>Or</span></div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" name="email" id="email">
<i class="icon_mail_alt"></i>
#error('email')
<strong style="color: red">{{$message}}</strong>
#enderror
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" name="password" id="password" value="">
<i class="icon_lock_alt"></i>
#error('password')
<strong style="color: red">{{$message}}</strong>
#enderror
</div>
<div class="clearfix add_bottom_15">
<div class="checkboxes float-left">
<input id="remember-me" type="checkbox" name="check">
<label for="remember-me">Remember Me</label>
</div>
<div class="float-right"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
</div>
<div class="text-center">
<button type="submit" class="btn_login">Log In</button>
</div>
<div class="text-center">
Don’t have an account? Sign up
</div>
<div id="forgot_pw">
<div class="form-group">
<label>Please confirm login email below</label>
<input type="email" class="form-control" name="email_forgot" id="email_forgot">
<i class="icon_mail_alt"></i>
</div>
<p>You will receive an email containing a link allowing you to reset your password to a new preferred
one.</p>
<div class="text-center"><input type="submit" value="Reset Password" class="btn_1"></div>
</div>
</div>
</form>

Answer 1

Try this
You need to some custom changes yourself in code.
$('#frmLogin').on('submit', function (event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: 'POST',
url: '/login',
data: formData,
success: function (res) {
console.log(res); // get resposnse from controller in json
if (res.emailError) {
$('.error-email').show().text(res.errorMsg);
} else {
$('.error-email').hide();
}
if (res.passwordError) {
$('.error-password').text(res.errorMsg);
} else {
$('.error-password').hide();
}
},
error: function (data) {
alert(data);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="frmLogin" method="POST">
#csrf
<div class="sign-in-wrapper">
Login with Facebook
Login with Google
<div class="divider"><span>Or</span></div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" name="email" id="email">
<i class="icon_mail_alt"></i>
<strong style="color: red;display: none;" class="error-email">{{$message}}</strong>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" name="password" id="password" value="">
<i class="icon_lock_alt"></i>
<strong style="color: red;display: none;" class="error-password">{{$message}}</strong>
</div>
<div class="clearfix add_bottom_15">
<div class="checkboxes float-left">
<input id="remember-me" type="checkbox" name="check">
<label for="remember-me">Remember Me</label>
</div>
<div class="float-right"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
</div>
<div class="text-center">
<button type="submit" class="btn_login">Log In</button>
</div>
<div class="text-center">
Don’t have an account? Sign up
</div>
</div>
</form>