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的错误消息数组，然后我还为输入字段创建了另一个数组attribut 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)');

然后我在ajjax页面验证这些字段。

谢谢你帮助我...

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

2 个答案: