Jquery Validation - несколько раз проверять поле в скрытой области
Я пытаюсь добавить подтверждение в форму, чтобы добавить контакт, и я не могу сделать это правильно. Моя форма скрыта (с помощью CSS), когда вы загружаете страницу, и вам нужно нажать на кнопку «Добавить контакт», чтобы она появилась. Затем вы увидите простую форму, в которой вы можете ввести имя (обязательно), фамилию и адрес электронной почты (обязательно и подтверждение адреса электронной почты). Когда вы закончите, вы нажмете «добавить», и Jquery выполнит Ajax-вызов к бэкэнду, чтобы добавить новый контакт в БД, и обновит представление, чтобы отобразить вновь созданный контакт и скрыть форму. Когда вы добавляете первый контакт, он работает правильно, но если вы пытаетесь добавить другой контакт сразу после того, как имя не подтверждено (работает, если вы перезагрузите страницу). Я не очень понимаю, почему он так себя ведет, наверное, так как мы уже проверили форму, когда что-то происходит, что нарушает процесс проверки, но я не могу найти что.
Вот мой 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();
}
});
а вот HTML-код соответствующей таблицы:
<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>
Мне больше некуда смотреть, и любая помощь будет с благодарностью!
Спасибо
Максиму