在 PHP 中使用 jQuery 和 Ajax 進行表單驗證

Question

我有一個表格，其中包含帶有課程、完成年份、大學和百分比字段的教育 div，我正在 PHP 中使用 Ajax 驗證這些教育 div 字段，並且工作正常，但是當我克隆教育 div 時，如果有任何第二個（克隆教育）div 中的驗證錯誤然后它反映在第一個（教育領域）中。

這是表格：教育詳情

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

這是ajax驗證：

<?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 {

    }
}

?>

請幫助解決克隆的 div 驗證消息部分。

Answer 1

使用 Jquery 驗證內置庫可以非常輕松地驗證表單。

http://jqueryvalidation.org/

Answer 2

我得到了實現這個的方法......

我正在創建一組顯示 div 的錯誤消息，然后我還為輸入字段屬性 onblur 創建了另一個數組

<div id="percentage[1]" class="text-center percentage"></div>

onblur="validate('percentage[1]', this.value)"

使用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)');

然后我在 ajax 頁面中驗證這些字段。

感謝你們對我的幫助...