Question

我正在构建一个webform，它提供了动态添加更多文章字段的可能性。如果此人留言或填写一行文章规范，该表格有效：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<form>
  <table class="articlelist">
    <tbody>
      <tr id="articleheaders">

      </tr>

      <tr>
        <td>
          <input type="text" name="form_SGTIN_CODE_1" class="codefield" id="form_SGTIN_CODE_1" maxlength="8"/>
        </td>
        <td>
          <input type="text" name="form_SGTIN_CODE_2" class="codefield" id="form_SGTIN_CODE_2" maxlength="8"/>
        </td>
        <td>
          <input type="text" name="form_SGTIN_CODE_3" class="codefield" id="form_SGTIN_CODE_3" maxlength="8" value="1"/>
        </td>
        <td>
          <input type="checkbox" name="form_SGTIN_CODE_4" class="codecheckbox" id="form_SGTIN_CODE_4" />
        </td>
      </tr>

    </tbody>
  </table>

  <span id="addArticle">Hinzufügen</span>
  <p>
    <textarea id="form_MESSAGE" name="form_MESSAGE"></textarea>
  </p>
  <?php echo $errorMessage; ?>
  <br />
  <input type="submit" />
</form>


</body>


<script>
var currentfieldnumber = 4;
$('#addArticle').on('click', function(event) {
  $('<tr>'+
  '<td>'+
  '<input type="text" name="form_SGTIN_CODE_' + currentfieldnumber +'" class="codefield" id="form_SGTIN_CODE_' + currentfieldnumber++ +'" maxlength="8"/>'+
  '</td>'+
  '<td>'+
  '<input type="text" name="form_SGTIN_CODE_' + currentfieldnumber +'" class="codefield" id="form_SGTIN_CODE_' + currentfieldnumber++ +'" maxlength="8"/>'+
  '</td>'+
  '<td>'+
  '<input type="text" name="form_SGTIN_CODE_' + currentfieldnumber +'" class="codefield" id="form_SGTIN_CODE_' + currentfieldnumber++ +'" maxlength="8" value="1"/>'+
  '</td>'+
  '<td>'+
  '<input type="checkbox" name="form_SGTIN_CODE_' + currentfieldnumber +'" class="codecheckbox" id="form_SGTIN_CODE_' + currentfieldnumber++ +'" />'+
  '</td>'+
  '<td style="padding-left:15px !important;">'+
  '<span class="deleteRowBtn">X<span>'+
  '</td>'+
  '</tr>').insertAfter('#articleheaders');
});


//delete the row of the corresponding button
$(document).on('click', '.deleteRowBtn',  function(event) {
   $(this).parent().parent().remove();
});

//prevent from entering letters into codefields
$(document).on('keypress', '.codefield', function(event) {
  if (!(event.keyCode >= 48 && event.keyCode<=57) && !(event.keyCode>=37&&event.keyCode<=40)){
   event.preventDefault();
  }
});
</script>


</html>

我在webform上使用的验证是通过ajax和jquery的混合完成的。这是必不可少的部分：

  function isEmpty(&$value){
    return !isset($value) || $value == "";
  }
    $articleflag=false;
    if(!isEmpty($param['form_MESSAGE'])){
      $articleflag = true;
    }
    foreach ($param as $key => $value) {
      if(strpos($key, 'form_SGTIN_CODE_')!==false){
        $flag = true;
        $num = substr($key, 16);
        for ($i=$num; $i <= $num +2 ; $i++) {
          if(isEmpty($param['form_SGTIN_CODE_'.$i])){
            $flag = false;
          }
        }
        if($flag){
          $articleflag = true;
          break;
        }
      }
    }
    if(!$articleflag){
      $valid = false;
      array_push($errFields, 'form_MESSAGE');
    }

重要的事情：这些字段作为$ param数组传递。不必检查生成的复选框，以使行有效。

有没有聪明的方法可以做到这一点？链接到小提琴： LINK

验证连续的字段

0 个答案: