JQuery-Validierung - Validiert ein Feld in einem verborgenen Bereich mehrmals
Ich versuche, eine Bestätigung in ein Formular einzufügen, um einen Kontakt hinzuzufügen, und es scheint, dass ich es nicht richtig machen kann. Mein Formular wird (mit CSS) ausgeblendet, wenn Sie die Seite laden und auf die Schaltfläche "Kontakt hinzufügen" klicken, damit es angezeigt wird. Sie sehen dann ein einfaches Formular, in dem Sie einen Vornamen (erforderlich), einen Nachnamen und eine E-Mail-Adresse (erforderlich und E-Mail-Bestätigung) eingeben können. Sobald Sie fertig sind, klicken Sie auf "Hinzufügen" und Jquery ruft Ajax im Backend auf, um den neuen Kontakt in der Datenbank hinzuzufügen. Anschließend wird die Ansicht aktualisiert, um den neu erstellten Kontakt anzuzeigen und das Formular auszublenden. Wenn Sie den ersten Kontakt hinzufügen, funktioniert dies ordnungsgemäß, aber wenn Sie versuchen, einen anderen Kontakt hinzuzufügen, nachdem der Vorname nicht überprüft wurde (funktioniert, wenn Sie die Seite neu laden). Ich verstehe nicht wirklich, warum es sich so verhält. Meine Vermutung ist, dass wir das Formular bereits beim ersten Mal validiert haben, was den Validierungsprozess stört, aber ich kann nicht herausfinden, was passiert.
hier ist mein javascript:
$(document).ready(function() {
//get values //
var service_name_value = $("#tbl-existing_emails tfoot tr td input[type='hidden']").val();
/***************** email management ******************************/
//add recipient function
//triggered when user clicks on add recipient button
//shows the form to enter the information for the new recipient+
$('#btn-show_report_add').live("click" ,function(e) {
if ($('#box-report').is(':visible')) {
return false;
}
if (total_existing_emails < 3) {
$('#box-report').show();
}
else {
alert("You can have up to 3 extra emails");
}
});
//hides the form to enter information for a new recipient
$('#box-report button.cancel').click(function() {
hideEmailForm();
});
//adds the email reicpient in DB
$('#btn-report_add').click(function(e) {
e.preventDefault();
// Validate new email form
$("#weeklyReportsForm").validate({
debug : true,
rules : {
fld_report_first_name : {
required: true
},
fld_report_email : {
required : true,
email : true
}
}
});
if ($('#weeklyReportsForm').valid() ) { // New email data
var new_recipient = {first : $('#fld_report_first_name').val(),
last : $('#fld_report_last_name').val(),
email : $('#fld_report_email').val(),
service_name : service_name_value
};
$.getJSON('/account/email-preferences/add-email', new_recipient, function(data) {
if(data.email == "fail"){
alert("It seems that the email you entered is incorrect.");
}
else if (data.status) {
addEmailRow(new_recipient.first, new_recipient.last, new_recipient.email, data.id);
}
else {
alert("Oops, we couldn't add this email.");
}
});
}
});
//////////// helper functions ////////////////
function addEmailRow(first, last, email, id) {
var new_row = '<tr data-id="'+id+'">';
if (!id) {
new_row += '<td>'+first+'<input type="hidden" name="recipients['+total_existing_emails+'][first]" value="'+name+'"/></td>';
new_row += '<td>'+last+'<input type="hidden" name="recipients['+total_existing_emails+'][last]" value="'+last+'"/></td>';
new_row += '<td>'+email+'<input type="hidden" name="recipients['+total_existing_emails+'][email]" value="'+email+'"/></td>';
}
else {
new_row += '<td>'+first+'</td>';
new_row += '<td>'+last+'</td>';
new_row += '<td>'+email+'</td>';
}
new_row += '<td><button type="button" class="button cancel"><span class="icon"></span><span>Remove</span></button></td>';
new_row += '</tr>';
$('#tbl-existing_emails tbody').append(new_row);
$('#row-nodata').remove();
total_existing_emails++;
hideEmailForm();
}
});
Und hier ist der HTML-Code der betreffenden Tabelle:
<table id="tbl-existing_emails" style="width:680px;">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<button type="button" class="button add" id="btn-show_report_add" name="btn-show_report_add"><span class="icon"></span><span>Add Recipient</span></button>
<div id="box-report" class="toggle">
<div class="row required">
<label for="fld_report_first_name">First Name</label>
<input type="text" name="fld_report_first_name" id="fld_report_first_name" value="{$REPORTRECIPIENT.first_name}" title="Enter the first name of a new recipient for this email.<br/><br/><em>Required</em><br/>Max 255 characters" />
</div>
<div class="row">
<label for="fld_report_last_name">Last Name</label>
<input type="text" name="fld_report_last_name" id="fld_report_last_name" value="{$REPORTRECIPIENT.last_name}" title="Enter the last name of a new recipient for this email.<br/><br/><em>Recommended</em><br/>Max 255 characters" />
</div>
<div class="row required">
<label for="fld_report_email">Email</label>
<input type="text" name="fld_report_email" id="fld_report_email" value="{$REPORTRECIPIENT.email}" title="Enter the new email address where this new recipient should receives this email.<br/><br/><em>Required</em><br/>Must be a properly formatted email address (e.g. [email protected])"/>
</div>
<input type="hidden" id="fld_report_service_name" name="fld_report_service_name" value="WeeklyReport"/>
<div class="clear"></div>
<button class="button add" id="btn-report_add" name="btn-report_add" type="button"><span class="icon"></span><span>Add</span></button>
<button type="button" class="button cancel" name="btn_cancel"><span class="icon"></span><span>Cancel</span></button>
</div>
</td>
</tr>
</tfoot>
<tbody>
{foreach from=$REPORTRECIPIENTS item="REPORTRECIPIENT"}
<tr data-id="{$REPORTRECIPIENT.id}" class="row box-existing_agent">
<td>{$REPORTRECIPIENT.first}</td>
<td>
{$REPORTRECIPIENT.last}
</td>
<td><a href="mailto:{$REPORTRECIPIENT.email}">{$REPORTRECIPIENT.email}</a></td>
<td>
<button type="button" class="button cancel" name="btn_enail_cancel"><span class="icon"></span><span>Remove</span></button>
</td>
</tr>
{foreachelse}
<tr id="row-nodata">
<td colspan="4">No recipients are associated with this email.</td>
</tr>
{/foreach}
</tbody>
</table>
Ich weiß nicht mehr, wo ich suchen soll und jede Hilfe wäre sehr dankbar!
Vielen Dank,
Max