Walidacja Jquery - Sprawdzaj kilka razy pole w ukrytym obszarze
Próbuję dodać sprawdzanie poprawności w formularzu, aby dodać kontakt, i nie mogę zrobić tego dobrze. Mój formularz jest ukryty (przy użyciu CSS), gdy ładujesz stronę i musisz kliknąć przycisk „dodaj kontakt”, aby go wyświetlić. Następnie zobaczysz prosty formularz, w którym możesz wpisać imię (wymagane), nazwisko i adres e-mail (wymagane i sprawdzanie poczty e-mail). Po zakończeniu kliknij „dodaj”, a Jquery wykona wywołanie Ajax do zaplecza, aby dodać nowy kontakt do bazy danych i odświeży widok, aby wyświetlić nowo utworzony kontakt i ukryć formularz. Gdy dodasz pierwszy kontakt, działa on prawidłowo, ale jeśli spróbujesz dodać inny kontakt zaraz po tym, jak imię nie zostanie zatwierdzone (działa, jeśli przeładujesz stronę). Naprawdę nie rozumiem, dlaczego tak się zachowuje, domyślam się, że sprawdziliśmy już formularz po raz pierwszy, co zakłóca proces walidacji, ale nie mogę znaleźć tego.
oto mój 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();
}
});
a oto HTML danej tabeli:
<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>
Naprawdę nie mam już gdzie szukać, a każda pomoc byłaby bardzo mile widziana!
Dziękuję Ci,
Max