Form validation using jQuery and Ajax in PHP - php

Question

I have a form which has education div with course, year of completion, university and percent fields, and I am validating those education div fields using Ajax in PHP, and thats working perfectly, but when I clone education div and then if there is any validation error in second (cloned education) div then it reflect it in first (education field).
this is the form:
Educational Details
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="courses">Course Type</label>
<div class="col-md-6">
<select class="form-control" name="course[]" id="course1[]" onblur="validate('course', this.value)">
<option value="0">--Select--</option>
<option value="FullTime">FullTime</option>
<option value="PartTime">PartTime</option>
<option value="Distance Education">Distance Education</option>
<option value="Executive">Executive</option>
</select>
</div>
</div>
<div id="course" class="text-center course"></div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="year">Year of Completion</label>
<div class="col-md-6">
<select class="form-control" name="year[]" id="year1[]" onblur="validate('year', this.value)">
<?php require('layout/educompletionyear.php'); ?>
</select>
</div>
</div>
<div id="year" class="text-center"></div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 label_usity control-label" for="university">University/Institute</label>
<div class="col-md-6">
<select class="form-control" name="university[]" id="university1[]" onblur="validate('university', this.value)">
<?php require('layout/institute.php'); ?>
</select>
</div>
</div>
<div id="university" class="text-center"></div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 label_degree control-label" for="degree">Degree</label>
<div class="col-md-6">
<select class="form-control" name="degree[]" id="degree1[]" onblur="validate('degree', this.value)">
<?php require('layout/degree.php'); ?>
</select>
</div>
</div>
<div id="degree" class="text-center"></div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 label_Grade control-label" for="grade">Grade</label>
<div class="col-md-6">
<select class="form-control" name="grade[]" id="grade1[]" onblur="validate('grade', this.value)" >
<option value="-1">--Select--</option>
<option value="A">A</option>
<option value="A+">A+</option>
<option value="B">B</option>
<option value="B+">B+</option>
<option value="C">C</option>
<option value="C+">C+</option>
<option value="D">D</option>
<option value="D+">D+</option>
<option value="E">E</option>
<option value="E+">E+</option>
<option value="F">F</option>
<option value="F+">F+</option>
</select>
</div>
</div>
<div id="grade" class="text-center"></div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="percentage">Percentage</label>
<div class="col-md-6">
<input id="percentage1[]" name="percentage[]" onblur="validate('percentage', this.value)" type="text" placeholder="Percentage" class="input_percentage form-control input-md">
</div>
</div>
<div id="percentage[]" class="text-center"></div>
</fieldset>
</div>
<a class="close" data-dismiss="alert" style="padding-right: 37px;opacity: 1;"><button type="button" class="addbtn btn btn-danger">Remove</button></a>
</div>
this is the ajax validation:
<?php
$value = $_GET['query'];
$formfield = $_GET['field'];
//EDUCATION PART
// Check Valid or Invalid Course type when user enters Course in select option input field.
if ($formfield == "course") {
if ($value =="0") {
echo "Please select Prefered location.";
}else{
}
}
// Check Valid or Invalid year when user enters Year of completion in select option input field.
if ($formfield == "year") {
if ($value =="-1") {
echo "Please select Year of completion.";
}else{
}
}
// Check Valid or Invalid University type when user enters University in select option input field.
if ($formfield == "university") {
if ($value =="-1") {
echo "Please select University.";
}else{
}
}
// Check Valid or Invalid Degree when user enters Degree in select option input field.
if ($formfield == "degree") {
if ($value =="-1") {
echo "Please select Degree.";
}else{
}
}
// Check Valid or Invalid Grade when user enters Grade in select option input field.
if ($formfield == "grade") {
if ($value =="-1") {
echo "Please select Grades.";
}else{
}
}
// Check Valid or Invalid Persentage when user enters Persentage in lastname input field.
if ($formfield == "percentage") {
if (strlen($value) ==0) {
echo "Please enter your Persentage.";
}elseif (!preg_match("/^((0|[1-9]\d?)(\.\d{1,2})?|100(\.00?)?)$/",$value)) {
echo "Only enter valid persentage";
}else {
}
}
?>
Please help to resolve cloned div validation messages part.

Answer 1

Use Jquery validate built-in library to validate forms very easily.
http://jqueryvalidation.org/

Answer 2

I got the way of implementing this....
i am creating an array of error message showing div and then i am also creating one more array for input fields attribut onblur
<div id="percentage[1]" class="text-center percentage"></div>
onblur="validate('percentage[1]', this.value)"
using jquery.
$('#btnAdd').click(function () {
var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#entry1').clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
newElem.find('.percentage').attr('id', 'percentage[' + newNum + ']');
newElem.find('.input_percentage').attr('onblur', 'validate("percentage[' + newNum + ']", this.value)');
and then i am validating these fields in ajjax page.
thank you for helping me...