Question

您好我在这里停止表单提交有问题。

我的表单有无限的文本字段，我的意思有时可以是零，一，三......数字

这是代码

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

我尝试使用此代码验证表单，但它不起作用

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;
}

点击按钮后，提醒“提交表单”，我想首先验证表单，如果所有字段都经过验证，则将表单提交给show.php文件

Answer 1

您正在使用for循环中的id，最好的方法是将字段赋予字段并检查它是否已填充。

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

在checkPassenger方法中，您可以按类循环

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;
}

第二种方法是为所有输入字段提供相同的类并检查

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;
}

在jquery javascript中验证从php循环生成的表单元素

1 个答案: