i have created a simple php registration form using ajax, i have few issue in my code that when i click register button without filling any of the field then it should throw error message saying name is required username is required like this, instead its throwing error message for each field. i.e., say if i simply click register button without filing any of the field then i first throw only error message saying enter name. my requirement is to throw error message at a single time for all the fields
index.php
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="script.js"></script>
<style>
.error {
color:red;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.div1 {
margin-top: -19px;
margin-bottom: -25px;
margin-left: -19px;
}
.copy {
border-radius: 4px;
padding: 6px 20px;
border-style: ridge;
}
.copy1{
border-radius: 4px;
padding: 6px 28px;
border-style: ridge;
}
.copy2{
border-radius: 4px;
padding: 4px 2px;
}
</style>
</head>
<body style="background-color:#1affff">
<div style="padding-left: 250px; padding-top:50px" class="div1">
<h2 style="color:#009999">Registration Form :</h2>
<p><span class="error">All fields are required </span></p>
<form action="" method="post" enctype="multipart/form-data">
<span style="color:#0099ff">Name: </span>
<input type="text" name="name" class= "name copy" style="margin-left: 52px" value ="">
<span class="namee error"> </span>
<br><br>
<span style="color:#0099ff"> E-mail: </span>
<input type="text" name="email" class= "email copy" style="margin-left: 48px" value ="">
<span class="emaile error"></span>
<br><br>
<span style="color:#0099ff"> Username: </span>
<input type="text" name="username" class= "username copy" style="margin-left:26px" value ="">
<span class="usernamee error"></span>
<br><br>
<span style="color:#0099ff"> Password: </span>
<input type="password" name="password" class= "password copy" style="margin-left:30px">
<span class="passworde error"> </span>
<br><br>
<span style="color:#0099ff"> Age : </span>
<input type="number" name="age" class= "age copy" style="margin-left:62px" value ="">
<span class="agee error"> </span>
<br><br>
<span style="color:#0099ff"> Date Of Birth : </span>
<input type="date" name="date_of_birth" class= "date_of_birth copy" style="margin-left:14px" value ="">
<span class="date_of_birthe error"> </span>
<br><br>
<span style="color:#0099ff"> Department : </span>
<select name="department" class= "department copy" style="margin-left:14px" value ="">
<option disabled selected value> -- select an option -- </option>
<option value="EE">Electrical & Electronics</option>
<option value="EC">Electronics & Communication</option>
<option value="ME">Mechanical</option>
<option value="CS">Computer Science</option>
<option value="CV">Civil</option>
<option value="IS">Information Science</option>
</select>
<span class="departmente error"> </span>
<br><br>
<input type="button" class="submit" name="submit" value="Register">
</form>
</div>
</body>
<script>
$(document).ready(function(){
$(".submit").click(function(){
var name = $(".name").val();
var email = $(".email").val();
var username = $(".username").val();
var password = $(".password").val();
var age = $(".age").val();
var date_of_birth = $(".date_of_birth").val();
var department = $(".department").val();
if(name==''){$('.namee').text('Enter name'); return false}
if(email==''){$('.emaile').text('Enter email'); return false}
if(username==''){$('.usernamee').text('Enter username'); return false}
if(password==''){$('.passworde').text('Enter password'); return false}
if(age==''){$('.agee').text('Enter age'); return false}
if(date_of_birth==''){$('.date_of_birthe').text('Enter date_of_birth'); return false}
if(department==''){$('.departmente').text('Enter department'); return false}
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name='+ name + '&email='+ email + '&username='+ username + '&password='+ password + '&age='+ age + '&date_of_birth='+ date_of_birth + '&department='+ department;
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "gethint.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
});
});
</script>
</html>
gethint.php
<?php
$mysqli = mysqli_connect("localhost","root","","ajax");
$username =$_POST["username"];
$password=$_POST["password"];
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
$email=$_POST["email"];
$name=$_POST["name"];
$age=$_POST["age"];
$date_of_birth=$_POST["date_of_birth"];
$department=$_POST["department"];
$check="SELECT * FROM users WHERE username = '$_POST[username]'";
$rs = mysqli_query($mysqli,$check);
$da = mysqli_fetch_array($rs, MYSQLI_NUM);
if($da[0] > 0) {
echo "Username Already in Exists<br/>";
}
else
{
$sql = "INSERT INTO users(`userid`,`username`, `password`, `email` , `name` , `age` , `date_of_birth` , `department`)
VALUES ('','".$username."', '".$hashed_password."', '".$email."' , '".$name."' , '".$age."' , '".$date_of_birth."' , '".$department."')";
if (mysqli_query($mysqli, $sql)) {
echo "Registered successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($mysqli);
}
mysqli_close($mysqli);
}
?>
I've done quite a lot of fixes in your code. They include:
Changes made to your code:
Changes that you still need to do:
You'll find comments in the code below explaining what's happening:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="script.js"></script>
<style>
.error {
color: red;
display: none;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.div1 {
margin-top: -19px;
margin-bottom: -25px;
margin-left: -19px;
}
.copy {
border-radius: 4px;
padding: 6px 20px;
border-style: ridge;
}
.copy1 {
border-radius: 4px;
padding: 6px 28px;
border-style: ridge;
}
.copy2 {
border-radius: 4px;
padding: 4px 2px;
}
</style>
</head>
<body style="background-color:#1affff">
<div style="padding-left: 250px; padding-top:50px" class="div1">
<h2 style="color:#009999">Registration Form :</h2>
<p><span class="error">All fields are required </span></p>
<form action="" method="post" id="regForm" enctype="multipart/form-data">
<span style="color:#0099ff">Name: </span>
<input type="text" name="name" id="name" class="copy" style="margin-left: 52px" value ="" />
<span class="namee error">Enter name</span>
<br/><br/>
<span style="color:#0099ff"> E-mail: </span>
<input type="text" name="email" id="email" class="copy" style="margin-left: 48px" value ="" />
<span class="emaile error">Enter email</span>
<br/><br/>
<span style="color:#0099ff"> Username: </span>
<input type="text" name="username" id="username" class="copy" style="margin-left:26px" value ="" />
<span class="usernamee error">Enter username</span>
<br/><br/>
<span style="color:#0099ff"> Password: </span>
<input type="password" name="password" id="password" class="copy" style="margin-left:30px" />
<span class="passworde error">Enter password</span>
<br/><br/>
<span style="color:#0099ff"> Age : </span>
<input type="number" name="age" id="age" class=" copy" style="margin-left:62px" value ="" />
<span class="agee error">Enter age</span>
<br/><br/>
<span style="color:#0099ff"> Date Of Birth : </span>
<input type="date" name="date_of_birth" id="date_of_birth" class="copy" style="margin-left:14px" value ="" />
<span class="date_of_birthe error">Enter date_of_birth</span>
<br/><br/>
<span style="color:#0099ff"> Department : </span>
<select name="department" id="department" class="copy" style="margin-left:14px" value ="">
<option disabled selected value> -- select an option -- </option>
<option value="EE">Electrical & Electronics</option>
<option value="EC">Electronics & Communication</option>
<option value="ME">Mechanical</option>
<option value="CS">Computer Science</option>
<option value="CV">Civil</option>
<option value="IS">Information Science</option>
</select>
<span class="departmente error">Enter department</span>
<br/><br/>
<input type="button" id="submit" class="submit" name="submit" value="Register" />
</form>
</div>
</body>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var error = false;
var form = document.getElementById('regForm');
var formData = new FormData(form);
// Loop through the form data
for(var p of formData){
// Check if the form data is empty
if(p[1] === ''){
// Show the error
$('.'+p[0]+'e').show();
error = true;
}
}
// Boolean to prevent AJAX from running in case of an error
if(error){
return false;
}
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "gethint.php",
data: formData,
processData: false,
contentType: false,
cache: false,
success: function(result){
alert(result);
}
});
});
});
</script>
</html>
<?php
//You should concatenate all error in one variable and print it error message containing div.
$mysqli = mysqli_connect("localhost","root","","ajax");
$err="";
$username =$_POST["username"];
if($username==""){
$err.="User name should not empty<br/>";
}
$password=$_POST["password"];
if($password==""){
$err.="Password should not empty<br/>";
}
$hashed_password = password_hash($password, PASSWORD_DEFAULT);
$email=$_POST["email"];
$name=$_POST["name"];
$age=$_POST["age"];
$date_of_birth=$_POST["date_of_birth"];
$department=$_POST["department"];
$check="SELECT * FROM users WHERE username = '$_POST[username]'";
$rs = mysqli_query($mysqli,$check);
$da = mysqli_fetch_array($rs, MYSQLI_NUM);
if($da[0] > 0) {
$err.="Username Already in Exists<br/>";
}
else
{
$sql = "INSERT INTO users(`userid`,`username`, `password`, `email` , `name` , `age` , `date_of_birth` , `department`)
VALUES ('','".$username."', '".$hashed_password."', '".$email."' , '".$name."' , '".$age."' , '".$date_of_birth."' , '".$department."')";
if (mysqli_query($mysqli, $sql)) {
echo "Registered successfully";
} else {
$err.="Error: " . $sql . "<br>" . mysqli_error($mysqli);
}
mysqli_close($mysqli);
}
if($err!=""){
echo $err;
}
?>