How to create Error Handler in PHP for Dynamic Add / Remove Input Fields

Question

I have created several form fields. In which first one is normal input text field while other are dynamic add / remove input fields. I have made the first field as required by using PHP arguments. It is working fine. But I am not able to make the add / remove input fields as required one using PHP arguments.

I want the error handler for add / remove input fields in same format as I have created.

Following is my code:

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

Please Help me... Thanks in advance...

Answer 1

Try below code:-

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