验证从jQuery JavaScript中的php循环生成的表单元素

Question

Hello i have problem for stopping form submission here.

My form has unlimited text fields, i mean sometimes can be zero, one, three .. n number

Here is code

<?php
$adultsNum = 3; $childNum = 2;
$countPeople = 1;
?>

<form action="./show.php" method="post" onsubmit="return checkFrom();">

   <?php for ($i = 0; $i < $adultsNum; $i++) { ?>
   <div class="person adult">
      <input type="hidden" id="adult<?=$countPeople;?>">
      <input type="text" name="fnameAdult[]" id="fnameAdult">
      <input type="text" name="lnameAdult[]" id="lnameAdult">
   </div>
   <?php $countPeople++; } ?>

   <?php for ($j = 0; $j < $childNum; $j++) { ?>
   <div class="person child">
      <input type="hidden" id="child<?=$countPeople;?>">
      <input type="text" name="fnameChild[]" id="fnameChild">
      <input type="text" name="lnameChild[]" id="lnameChild">
   </div>
   <?php $countPeople++; } ?>

   <button class="continue">Confirm</button>
</form>

I tried to this code to validate the form, but it doesn't work

function checkPassenger() {
    $('[id^=adult]').each(function() { // hidden input
         var fnameAdult = $(this).closest('div.person').find("input#fnameAdult").val();
         var lnameAdult = $(this).closest('div.person').find("input#lnameAdult").val();

         if(fnameAdult.length < 1) {
             console.log('error: First name is missing');
             return false;
         }

         if(lnameAdult.length < 1) {
             console.log('error: Last name is missing');
             return false;
         }

    });

    alert("submit form");
    return false;
}

After i click the button, alerts 'submit form' and i want to first validate the form, if all fields validated, then submit the form to show.php file

Answer 1

You are using id in for loop , best way is give class to fields and check it is filled or not.

<form action="./show.php" method="post" onsubmit="return checkFrom();">

   <?php for ($i = 0; $i < $adultsNum; $i++) { ?>
   <div class="person adult">
      <input type="hidden" id="adult<?=$countPeople;?>">
      <input type="text" class="fnameadult" name="fnameAdult[]" id="fnameAdult">
      <input type="text" class="lnameadult" name="lnameAdult[]" id="lnameAdult">
   </div>
   <?php $countPeople++; } ?>

   <?php for ($j = 0; $j < $childNum; $j++) { ?>
   <div class="person child">
      <input type="hidden" id="child<?=$countPeople;?>">
      <input type="text" class="fnamechild" name="fnameChild[]" id="fnameChild">
      <input type="text" class="fnamechild" name="lnameChild[]" id="lnameChild">
   </div>
   <?php $countPeople++; } ?>

   <button class="continue">Confirm</button>
</form>

In checkPassenger method you can loop by class

function checkPassenger() {

    $('.fnameadult').each(function(){
      if ($.trim($(this).val()) == '')
        {
          console.log('error: First name is missing');
          return false;
        }
    });

    $('.lnameadult').each(function(){
      if ($.trim($(this).val()) == '')
        {
          console.log('error: Last name is missing');
          return false;
        }
    });

    //Same for others

    alert("submit form");
    return false;
}

Second way is give same class to all input fields and check

function checkPassenger() {

    var error =0;
    $('.ClassName').each(function(){
      if ($.trim($(this).val()) == '')
        {
          error++;
        }
    });

    if(error>0)
    {
      alert('Please enter all fields');
      return false;
    }

    //Same for others

    alert("submit form");
    return false;
}