-1

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.

Peter
  • 913
  • 1
  • 12
  • 24
Ganpat Kakar
  • 153
  • 1
  • 11
  • Once you've cloned the div are you changing the id? If not then that's why the validation message is appearing in the first education div rather than the second as it looks for the first id on the page. Check out this post: http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id – hlh3406 Jun 17 '15 at 07:46
  • I am adding a new id with jquery but with ajjax calidation is only refflect to that first error div's id – Ganpat Kakar Jun 17 '15 at 08:25

2 Answers2

1

Use Jquery validate built-in library to validate forms very easily.

http://jqueryvalidation.org/

shihab mm
  • 505
  • 5
  • 15
  • Tthank you for advice but i am on 70% to finish this. if you help me to resolve this it will be very helpfull for me. – Ganpat Kakar Jun 17 '15 at 07:53
  • i want that how will i update my field name in onblur:(field, query) field value and how i ll check that input's values in ajax – Ganpat Kakar Jun 17 '15 at 09:53
0

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

Ganpat Kakar
  • 153
  • 1
  • 11