Form Validation Explained

##Form Validation Method:

In this project a combination of Php & AJAX script is used for validating the HTML form inputs.
Visit w3schools to learn more about AJAX (http://www.w3schools.com/ajax/).
Forms elements that require no text validation is given the HTML5 attribute "required" so that such elements cant be empty.

###The AJAX part:

The AJAX script is located at js/validate.js

function validate(type,field, query) {
var xmlhttp;
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = "Validating..";
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = xmlhttp.responseText;
} else {
document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try Again</a> the page.";
}
}
xmlhttp.open("GET", "/job_portal/js/valid.php?type=" + type + "&query=" + query, true);
xmlhttp.send();
}

---

In this AJAX script we define the function validate(type,field, query) .
it accepts 3 arguments type, field, and query. type is the type of validation to be performed, field is the error field id (label tag) in html document where error message is to be displayed. The query argument is the value a user input to a html form element. Here we use onblur event to call the function validate(type,field, query) thus at the moment the user leave focus on an input element, it will be validated.

CODE:
<input type="email" name="useremail" placeholder="Your E-mail" class="form-control" id="email" required onblur="validate('email','emailerror',this.value)">

The AJAX script pass the function arguments to the php page valid.php using GET method.

CODE:
xmlhttp.open("GET", "/job_portal/js/valid.php?type=" + type + "&query=" + query, true)

The response text from server side is obtained by the AJAX script and it is written to the corresponding error label (field) to notify the user.

---

###The PHP part:

A small snippet from valid.php file in "js" directory is given below:

include_once('config.php');
$value = $_GET['query'];
$formfield = $_GET['type']; // type of validation to do
// Check Valid or Invalid user name when user enters user name in username input field.
if ($formfield == "username") {
if($value=="")
echo "Name Cant be empty";
else if (strlen($value) < 3) {
echo "Must be 3+ letters";
}
}

---

In the php file we carry out server side validation, we perform many comparisons here against the query(value) and type.

---

###JavaScript part

The script part from register_user.php is given below:

<script type="text/javascript">
function checkForm() {
// Fetching values from all input fields and storing them in variables.
var email = document.getElementById("emailerror").innerHTML;
var pass1 = document.getElementById("passerror").innerHTML;
var pass2 = document.getElementById("passerror2").innerHTML;
var name = document.getElementById("nameerror").innerHTML;
var mobno = document.getElementById("mobnoerror").innerHTML;
var skills = document.getElementById("skillerror").innerHTML;
//Check input Fields Should not be blanks.
var p1=document.getElementById("passnew").value;
var p2=document.getElementById("passconf").value;
if (p1 != p2) {
document.getElementById("passerror2").innerHTML="Password Donot Match" ;
}
else
{
document.getElementById("passerror2").innerHTML="" ;
}
if(email == '' && pass1 == '' && pass2 == '' && name == "" && mobno == '' && skills =='') {
//document.getElementById("reguser").submit();
return true;
}
else {
alert("Fill in with correct information");
return false;
}
}

</script>

---

In the HTML document, there are different form elements defined. All the form elements are given a unique id attribute and a name. Some form elements that do not have to be text validated are only validated with required attribute so that it cant be submitted empty. Every elements that should be validated with this scripts are given a corresponding label tag eg: emailerror, skillerror etc.

HTML code:
<label id="emailerror" class="error" ></label>

Script activation:
<FORM id="reguser" onsubmit="return checkForm()" METHOD="post" ACTION="process_user.php">

On submitting the form the function checkForm() is called and it simply check if all the error field are empty or not. If all fields are empty a true is returned so that the form will be submitted. Otherwise the user is alerted to fill in with correct details.

---