在 PHP 中使用 jQuery 和 Ajax 进行表单验证

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...