Registration Form Validation Using Ajax In PHP
Last Updated : Mar 11, 2024
IN - PHP | Written & Updated By - Dikshita
In this tutorial we will show you the solution of registration form validation using ajax in PHP, today we are going to understand how to create a registration form in php with validations using Ajax.
First of all here we have to create a database, then a table in html, validations in jQuery or php, and at last we use Ajax.
So, that our page due to some error our page would not refreshed again and again. Now, let us understand this with help of codes.
Step By Step Guide On Registration Form Validation Using Ajax In PHP :-
Here, we already know about php, jQuery, html and css also. Ajax is new for all of us.
Ajax is used to update and check our specific part or block of data without reloading our full page. Now, let us use a combination of all of them in the codes given below.
<!Doctype html>
<html>
<head>
<title> form submission using ajax php and jQuery </title>
<!--Include JQuery File -->
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<script>
$('document').ready(function() {
/* handle form validation */
$("#register-form").validate({
rules:
{
user_name: {
required: true,
minlength: 3
},
password: {
required: true,
minlength: 8,
maxlength: 15
},
cpassword: {
required: true,
equalTo: '#password'
},
user_email: {
required: true,
email: true
},
},
messages:
{
user_name: "please enter user name",
password:{
required: "please enter a password",
minlength: "password at least have 8 characters"
},
user_email: "please enter a valid email address",
cpassword:{
required: "please retype your password",
equalTo: "password doesn't match !"
}
},
submitHandler: submitForm
});
function submitForm() {
var data = $("#register-form").serialize();
$.ajax({
type : 'POST',
url : 'register.php',
data : data,
beforeSend: function() {
$("#error").fadeOut();
$("#btn-submit").html('sending ...');
},
success : function(response) {
if(response==1){
$("#error").fadeIn(1000, function(){
$("#error").html('Sorry email already taken');
$("#btn-submit").html('Create Account');
});
} else if(response=="registered"){
$("#btn-submit").html('Signing Up ...');
setTimeout('$(".form-signin").fadeOut(500,
function(){ $(".register_container").load("welcome.php"); }); ',3000);
} else {
$("#error").fadeIn(1000, function(){
$("#error").html('<div> '+data+' !</div>');
$("#btn-submit").html('Create Account');
});
}
}
});
return false;
}
});
</script>
</head>
<body>
<div class="register_container">
<form class="form-signin" method="post" id="register-form">
<h2 class="form-signin-heading">User Registration Form</h2><hr />
<div id="error">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" name="user_name" id="user_name" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="user_email" id="user_email" />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" id="password" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Retype Password" name="cpassword" id="cpassword" />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-save" id="btn-submit">
<span class="glyphicon glyphicon-log-in"></span> Create Account
</button>
</div>
</form>
</div>
</form>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, as we can see that we here we create a registration form. In which our input fields are name, email, password and confirm password.
- After then we apply some validations with help of jQuery. It is ways better if you run this code on browser.
- At next step rest work is done by Ajax. For example if you submit your form using submit button and it have some error.
- Then Ajax empty or say show error using jQuery and did not reload or say empty your full webpage.
- On successful submission of form. You are redirected to our next page. We hope you understand the above codes easily.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to create a registration form with validations using jQuery and Ajax.
I hope this tutorial on registration form validation using ajax in PHP helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
