I have multiple forms on a page (the number can vary depending on the user how many form blocks they add to the page). There are 2 form validation files: the view.js - this is the user side, and controller.php - that's the server side. The form is in a view.php.
I can add unique block IDs to each form and field from the controller. The ID changes every time a new block is placed. So, nothing can be accessed straight as for example $('#name123').
The problems are:
How can jQuery know which of the forms needs to be processed? how can it know which of the submit buttons was pressed if the ID number is unknown prior to that?
Even if I find out which form was tried to be submitted, how can a unique block ID generated by the controller be processed by jQuery? That is, if I, say, have 3 forms on a page, how can jQuery know which input element fired a signal (e.g. blur)?
Thank you.
some view.php code:
<form id="contact_form<?php echo $bUID; ?>"
enctype="multipart/form-data"
action="<?php echo $formAction?>"
method="post"
accept-charset="utf-8">
<h2><?php echo $form_title; ?></h2>
<h2><?php echo $bUID; ?></h2>
<!--<input type="hidden" name="bUID" data-buid="<?php echo $bUID; ?>">-->
<div class="form-group">
<?php
echo $form->label('name', $entry_name);
echo $form->text('name'.$bUID, $name, array ('maxlength'=>"50", 'required'=>"required", 'data-buid'=>$bUID));
echo '<div id="tip-name'.$bUID.'" class="tip-name tip">' . $entry_name_tip . '</div>';
echo '<div id="error-name'.$bUID.'" class="error-name tip hidden">' . $error_name . '</div>';
?>
</div>
some view.js code:
$(document).ready(function(e) {
var bUID;
$('form').submit(function(event){
bUID = $(this).data("buid");
event.preventDefault();
submitForm(bUID);
});
$('input[type=text]').blur(function() {
bUID = $(this).data("buid");
if (!$('#name'+bUID).val() || $('#name'+bUID).val().length < 2 || $('#name'+bUID).val().length > 60) {
$('#error-name'+bUID).removeClass("hidden");
$('#tip-name'+bUID).addClass("hidden");
$('#name'+bUID).addClass("problem");
return false;
}
else {
$('#error-name'+bUID).addClass("hidden");
$('#tip-name'+bUID).removeClass("hidden");
$('#name'+bUID).removeClass("problem");
return true;
}
});