How do I echo the validation errors to my form after submitting with AJAX?
Question
So i have my index.php that looks like this.
<head>
<script>
$(document).ready(function() {
$('#register').submit(function(event) {
var username = $("input[name='username']").val();
var email = $("input[name='email']").val();
var pwd1 = $("input[name='pwd1']").val();
var pwd2 = $("input[name='pwd2']").val();
$('.register-status').load('process.php',{
username: username,
email: email,
pwd1: pwd1,
pwd2: pwd2
});
event.preventDefault();
});
});
</script>
</head>
<body style="background-color:#a2a2a2" class="">
<div class="container col-3 bg-light mt-5 p-3 rounded">
<form id="register" action="process.php" method="post">
<div class="row d-flex justify-content-center">
<input class="border rounded m-2 text-center" type="text" name="username" placeholder="Username">
</div>
<div class="row d-flex justify-content-center">
<input class="border rounded m-2 text-center" type="text" name="email" placeholder="E-mail">
</div>
<div class="row d-flex justify-content-center">
<input class="border rounded m-2 text-center" type="text" name="pwd1" placeholder="Password">
</div>
<div class="row d-flex justify-content-center">
<input class="border rounded m-2 text-center" type="text" name="pwd2" placeholder="Confirm password">
</div>
<div class="row d-flex justify-content-center">
<button class="btn btn-warning mt-2" type="submit" name="register">Registration</button>
</div>
</form>
<p class="register-status"></p>
</div>
</body>
And this is my process.php
<?php
if (isset($_POST['register'])) {
if (empty($_POST['username'])) {
echo '<span>Please enter a username</span>';
}
if (empty($_POST['email'])) {
echo '<span>Please enter an E-mail</span>';
}
if (empty($_POST['pwd1'])) {
echo '<span>Please enter a password</span>';
}
if (empty($_POST['pwd2']) && !empty($_POST['pwd1'])) {
echo '<span>Please confirm your password</span>';
}
elseif (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
echo '<span>Please enter a valid E-mail address</span>';
}
}
?>
My problem is that i don't know how to display the validation errors without refreshing the page, or not using the preventDefault() function, because without that, the page redirects to process.php and all the validation errors will show up there.
1 answers
solution1
0 2019-12-07 14:12:26
You should create alert area inside your form like this:
<div class="alert alert-danger" role="alert" style="display: none">
<!-- errors gonna be here -->
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
when you get the error from backend part you should make this alert area visible by toggling it in jquery and fill it with backend response errors
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.