Javascript 如何在PHP中为动态添加/删除输入字段创建错误处理程序

我已经创建了几个表单字段。其中第一个是普通输入文本字段，而另一个是动态添加/删除输入字段。通过使用PHP参数，我创建了第一个字段。它工作得很好。但我无法使用PHP参数使添加/删除输入字段成为所需字段

我希望添加/删除输入字段的错误处理程序的格式与我创建的格式相同

以下是我的代码：

<?php

if ( isset( $_POST['project_draft'] ) ) {

$project_title = wp_strip_all_tags( $_POST['project_title'] );   
$fund_details->allocate_items = array_unique( array_map( 'sanitize_text_field', $_POST['allocate_items'] ) );
$fund_details->allocate_amount = array_map( 'sanitize_text_field', $_POST['allocate_amount'] );

    global $project_draft_errors;
    $project_draft_errors = new WP_Error;

if ( empty( $project_title ) ) {

    $project_draft_errors->add('field', 'Project title is required.');

    } else

if ( strlen( $project_title ) > '100' ) {

    $project_draft_errors->add('field', 'Project title should not be more than 100 character.');

    }

if ( is_wp_error( $project_draft_errors ) ) {

    foreach ( $project_draft_errors->get_error_messages() as $project_draft_error ) { ?>

      <div class="alert alert-danger" role="alert"><strong>ERROR</strong>: <?php echo $project_draft_error; ?></div>

<?php } }

}

?>

<form method="POST" enctype="multipart/form-data">

<div class="panel panel-default">

  <div class="panel-body">

  <div class="form-group">

    <label for="project_title">Project Title <b style="color:#FF0000;">*</b></label>

    <input type="text" class="form-control" name="project_title" id="project_title" placeholder="Give your project a nice title...">

  </div>  

  </div>

</div>

<div class="panel panel-default">

  <div class="panel-heading"><center><b>Allocation of Funds</b></center></div>

  <div class="panel-body">

    <div class="row">

      <div class="col-md-5"><label>Allocation Items <b style="color:#FF0000;">*</b></label></div>
      <div class="col-md-5"><label>Amount <b style="color:#FF0000;">*</b></label></div>
      <div class="col-md-2"></div>

    </div>

    <div class="row">

      <div class="col-md-5">

        <div class="form-group">

          <input type="text" class="form-control" name="allocate_items[]" placeholder="">

        </div>

      </div>

      <div class="col-md-5">

        <div class="form-group">

          <input type="text" class="form-control" name="allocate_amount[]" placeholder="">

        </div>

      </div>

      <div class="col-md-2">

        <button type="button" class="btn btn-success" id="add-allocation-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>

      </div>

    </div>

    <div id="fund-allocation-fields">

    </div>

<p class="help-block"><i>Total amount must be equal to the goal amount.</i></p>

  </div>

</div>

<input class="btn btn-warning btn-block" type="submit" name="project_draft" value="Draft" style="border-radius: 0px;">

</form>

<script type="text/javascript">

  var i = 0;

  jQuery(document).ready(function($) {

    //fadeout selected item and remove
    $(document).on('click', '#remove-allocation-fields', function(event) {

      event.preventDefault();
      $(this).parent().fadeOut(300, function() {
        $(this).parent().empty();
        return false;

      });

    });

    var rows = '<div class="fund-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>';

    //add input
    $('#add-allocation-fields').click(function() {

      $(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
      i++;
      return false;

    });

  });

</script>

错误：
项目名称*
资金分配
分配项目*
数量*
添加
总金额必须等于目标金额

var i=0；
jQuery（文档）.ready（函数（$）{
//淡出所选项目并删除
$（文档）。在（'单击'，'删除分配字段'）上，函数（事件）{
event.preventDefault（）；
$（this.parent（）.fadeOut（300，function（））{
$（this.parent（）.empty（）；
返回false；
});
});
变量行='Remove'；
//添加输入
$（“#添加分配字段”）。单击（函数（）{
$（行）.fadeIn（“慢”）.appendTo（“#资金分配字段”）；
i++；
返回false；
});
});

请帮帮我。。。提前感谢…

请尝试以下代码：-

<?php

if ( isset( $_POST['project_draft'] ) ) {

$project_title = wp_strip_all_tags( $_POST['project_title'] );   
$fund_details->allocate_items = array_unique( array_map( 'sanitize_text_field', $_POST['allocate_items'] ) );
$fund_details->allocate_amount = array_map( 'sanitize_text_field', $_POST['allocate_amount'] );

    global $project_draft_errors;
    $project_draft_errors = new WP_Error;


if ( empty( $project_title ) ) {

    $project_draft_errors->add('field', 'Project title is required.');

    } else

if ( strlen( $project_title ) > '100' ) {

    $project_draft_errors->add('field', 'Project title should not be more than 100 character.');

    }
    /* validating blank values only */
    unset($_POST['project_title']);
    foreach($_POST as $postDataKey=>$postDataVal){
        if ( empty( $postDataVal ) ) {

            $project_draft_errors->add('field', $postDataKey.' is required.');

        }
    }

if ( is_wp_error( $project_draft_errors ) ) {

    foreach ( $project_draft_errors->get_error_messages() as $project_draft_error ) { ?>

      <div class="alert alert-danger" role="alert"><strong>ERROR</strong>: <?php echo $project_draft_error; ?></div>

<?php } }

}

?>

<form method="POST" enctype="multipart/form-data">

<div class="panel panel-default">

  <div class="panel-body">

  <div class="form-group">

    <label for="project_title">Project Title <b style="color:#FF0000;">*</b></label>

    <input type="text" class="form-control" name="project_title" id="project_title" placeholder="Give your project a nice title...">

  </div>  

  </div>

</div>

<div class="panel panel-default">

  <div class="panel-heading"><center><b>Allocation of Funds</b></center></div>

  <div class="panel-body">

    <div class="row">

      <div class="col-md-5"><label>Allocation Items <b style="color:#FF0000;">*</b></label></div>
      <div class="col-md-5"><label>Amount <b style="color:#FF0000;">*</b></label></div>
      <div class="col-md-2"></div>

    </div>

    <div class="row">

      <div class="col-md-5">

        <div class="form-group">

          <input type="text" class="form-control" name="allocate_items[0]" placeholder="">

        </div>

      </div>

      <div class="col-md-5">

        <div class="form-group">

          <input type="text" class="form-control" name="allocate_amount[0]" placeholder="">

        </div>

      </div>

      <div class="col-md-2">

        <button type="button" class="btn btn-success" id="add-allocation-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>

      </div>

    </div>

    <div id="fund-allocation-fields">

    </div>

<p class="help-block"><i>Total amount must be equal to the goal amount.</i></p>

  </div>

</div>

<input class="btn btn-warning btn-block" type="submit" name="project_draft" value="Draft" style="border-radius: 0px;">

</form>

<script type="text/javascript">

  var i = 0;

  jQuery(document).ready(function($) {

    //fadeout selected item and remove
    $(document).on('click', '#remove-allocation-fields', function(event) {

      event.preventDefault();
      $(this).parent().fadeOut(300, function() {
        $(this).parent().empty();
        return false;

      });

    });

    var rows = '<div class="fund-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_items[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="allocate_amount[]" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-allocation-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>';

    //add input
    $('#add-allocation-fields').click(function() {

      $(rows).fadeIn("slow").appendTo('#fund-allocation-fields');
      i++;
      return false;

    });

  });

</script>

错误：
项目名称*
资金分配
分配项目*
数量*
添加
总金额必须等于目标金额

var i=0；
jQuery（文档）.ready（函数（$）{
//淡出所选项目并删除
$（文档）。在（'单击'，'删除分配字段'）上，函数（事件）{
event.preventDefault（）；
$（this.parent（）.fadeOut（300，function（））{
$（this.parent（）.empty（）；
返回false；
});
});
变量行='Remove'；
//添加输入
$（“#添加分配字段”）。单击（函数（）{
$（行）.fadeIn（“慢”）.appendTo（“#资金分配字段”）；
i++；
返回false；
});
});

是否要验证服务器端的分配项目、分配金额等？如果是，则为每个循环设置以检查错误。@Kuldeepsing。。是的，但在我当前的格式中，我没有让hoe合并foreach循环来检查错误到达（$\u POST as$postData）{}这是您要求的吗？我知道foreach，但问题是我没有得到如何合并到我的代码中。。你能帮我创建代码吗。。。Thnks.您希望在适当的word press架构或核心中对您合适吗？但此代码不会处理分配项目、分配金额的错误…它将检查所有字段。还有一件事你的html没有正确的html结构。请为每组元素设置适当的索引。请也更新您的J-query代码$project\u标题不是添加/删除字段的一部分。这是一个独立的领域。怎么能预测呢？当我将分配项保持为空时，不会显示任何错误