Hi Friends,
Today I have learned about AJAX. It is Asynchronous JavaScript And XML. Using Ajax you can pass the values without page refreshing. Here with gave an example code for your reference. It is very basic level only.
validation.html
<!DOCTYPE html> <html> <head> <title>Basic Form Validation</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--Style for validate file --> <link rel="stylesheet" content="type/css" href="css/style.css"> <link rel="stylesheet" content="type/css" href="css/bootstrap.min.css"> </head> <body class="form-bg"> <div class="container"> <div class="row"> <div class="col-md-12 form_val"> <h2 class="val_title">Basic Form Validation</h2> <div class="form-group col-md-offset-4 col-md-4 col-md-offset-4"> <label for="userid">User Name</label> <input name="userid" class="form-control" id="usr" type="text"> <div id="msg1" style="color:#FF0000"></div> </div> <div class="form-group col-md-offset-4 col-md-4 col-md-offset-4"> <label for="email">Email</label> <input name="email" class="form-control" id="email" type="text"> <div id="msg2" style="color:#FF0000"></div> </div> <div class="form-group col-md-offset-4 col-md-4 col-md-offset-4"> <label for="mobile">Mobile Number</label> <input name="mobile" class="form-control" id="mobile" type="text"> <div id="msg3" style="color: #FF0000"></div> </div> <div class="form-group col-md-offset-4 col-md-4 col-md-offset-4"> <button type="submit" onClick="formvalidate()" class="btn btn-success">Submit</button> </div> </div> </div> </div> <!--Script for validate file---> <script type="text/javascript" src="js/my-script.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html>
style.css
/*** Style for form validation start**/
.form-bg {
background: #fff;
}
.form_val {
top: 0;
margin-top: 10%;
border: 2px solid #fff;
padding: 100px;
background: #ccc;
}
.val_title {
text-align: center;
font-family: "Montserrat-Regular";
padding-bottom: 20px;
}
/*** Style for form validation end**/
my-script.js
/****Form validation start******/
function formvalidate() {
var str=true;
document.getElementById("msg1").innerHTML="";
document.getElementById("msg2").innerHTML="";
document.getElementById("msg3").innerHTML="";
if(document.getElementById("usr").value=='') {
document.getElementById("msg1").innerHTML="*Please Enter User Name";
str=false;
}
if(document.getElementById("email").value=='') {
document.getElementById("msg2").innerHTML="*Please Enter Your Email Id";
str=false;
}
else {
var validate_char= /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(!document.getElementById("email").value.match(validate_char)) {
document.getElementById("msg2").innerHTML="*Please Enter Valid Email ID";
str=false;
}
}
if(document.getElementById("mobile").value=='') {
document.getElementById('msg3').innerHTML="*Please Enter Your Mobile Number";
str=false;
}
else {
var mob_val = /^(\+\d{1,3}[- ]?)?\d{10}$/;
if(!document.getElementById("mobile").value.match(mob_val)) {
document.getElementById("msg3").innerHTML="*Please Enter Valid Mobile Number";
str=false;
}
}
/***Ajax part start***/
if(str == true) {
var userName = $("#usr").val();
var email = $("#email").val();
var mobile = $("#mobile").val();
$.ajax ({
url: "a_validation.php",
type: "post",
data: {
a_validation: "a_validation",
usr: userName,
email: email,
mobile: mobile
},
success: function() {
alert("Form Value is Soterd Successfully");
}
});
}
/***Ajax part end***/
}
/****Form validation end******/
Screenshot 1:
Screenshot 2:
Note : Screenshot 2 shows inspect element with network option through ajax value passing in the bottom of Header named as Form Data. (userName, email, Mobile Number)
