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