Databases
StackOverflow2013
Postsdbo
POJquery Validation - Validate several time a field in a hidden area
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery Validation - Validate several time a field in a hidden area
    primarykey
    data
    text
    <p>I'm trying to add some validation on a form to add a contact and I can't seem to make it right. My form is hidden (with CSS) when you load the page and you have to click on the "add contact" button to make it appear. You then see a simple form where you can enter a first name (required), a last name and an email address (required and email validation). Once you are done, you click "add" and Jquery will do an Ajax call to the backend to add the new contact in the DB and will refresh the view to display the newly created contact and hide the form. When you add the first contact it works right but if you try to add an other contact right after the first name is not validated (works if you reload the page). I don't really understand why it's behaving like this, my guess is since we already validated the form a first time something is going that disrupting the validation process but I can't find what.</p> <p>here is my javascript :</p> <pre><code>$(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 &lt; 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 = '&lt;tr data-id="'+id+'"&gt;'; if (!id) { new_row += '&lt;td&gt;'+first+'&lt;input type="hidden" name="recipients['+total_existing_emails+'][first]" value="'+name+'"/&gt;&lt;/td&gt;'; new_row += '&lt;td&gt;'+last+'&lt;input type="hidden" name="recipients['+total_existing_emails+'][last]" value="'+last+'"/&gt;&lt;/td&gt;'; new_row += '&lt;td&gt;'+email+'&lt;input type="hidden" name="recipients['+total_existing_emails+'][email]" value="'+email+'"/&gt;&lt;/td&gt;'; } else { new_row += '&lt;td&gt;'+first+'&lt;/td&gt;'; new_row += '&lt;td&gt;'+last+'&lt;/td&gt;'; new_row += '&lt;td&gt;'+email+'&lt;/td&gt;'; } new_row += '&lt;td&gt;&lt;button type="button" class="button cancel"&gt;&lt;span class="icon"&gt;&lt;/span&gt;&lt;span&gt;Remove&lt;/span&gt;&lt;/button&gt;&lt;/td&gt;'; new_row += '&lt;/tr&gt;'; $('#tbl-existing_emails tbody').append(new_row); $('#row-nodata').remove(); total_existing_emails++; hideEmailForm(); } </code></pre> <p>});</p> <p>and here is the HTML of the concerned table :</p> <pre><code>&lt;table id="tbl-existing_emails" style="width:680px;"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Last Name&lt;/th&gt; &lt;th&gt;Email&lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tfoot&gt; &lt;tr&gt; &lt;td colspan="4"&gt; &lt;button type="button" class="button add" id="btn-show_report_add" name="btn-show_report_add"&gt;&lt;span class="icon"&gt;&lt;/span&gt;&lt;span&gt;Add Recipient&lt;/span&gt;&lt;/button&gt; &lt;div id="box-report" class="toggle"&gt; &lt;div class="row required"&gt; &lt;label for="fld_report_first_name"&gt;First Name&lt;/label&gt; &lt;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.&lt;br/&gt;&lt;br/&gt;&lt;em&gt;Required&lt;/em&gt;&lt;br/&gt;Max 255 characters" /&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;label for="fld_report_last_name"&gt;Last Name&lt;/label&gt; &lt;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.&lt;br/&gt;&lt;br/&gt;&lt;em&gt;Recommended&lt;/em&gt;&lt;br/&gt;Max 255 characters" /&gt; &lt;/div&gt; &lt;div class="row required"&gt; &lt;label for="fld_report_email"&gt;Email&lt;/label&gt; &lt;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.&lt;br/&gt;&lt;br/&gt;&lt;em&gt;Required&lt;/em&gt;&lt;br/&gt;Must be a properly formatted email address (e.g. psmith@homebuilder.com)"/&gt; &lt;/div&gt; &lt;input type="hidden" id="fld_report_service_name" name="fld_report_service_name" value="WeeklyReport"/&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;button class="button add" id="btn-report_add" name="btn-report_add" type="button"&gt;&lt;span class="icon"&gt;&lt;/span&gt;&lt;span&gt;Add&lt;/span&gt;&lt;/button&gt; &lt;button type="button" class="button cancel" name="btn_cancel"&gt;&lt;span class="icon"&gt;&lt;/span&gt;&lt;span&gt;Cancel&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/tfoot&gt; &lt;tbody&gt; {foreach from=$REPORTRECIPIENTS item="REPORTRECIPIENT"} &lt;tr data-id="{$REPORTRECIPIENT.id}" class="row box-existing_agent"&gt; &lt;td&gt;{$REPORTRECIPIENT.first}&lt;/td&gt; &lt;td&gt; {$REPORTRECIPIENT.last} &lt;/td&gt; &lt;td&gt;&lt;a href="mailto:{$REPORTRECIPIENT.email}"&gt;{$REPORTRECIPIENT.email}&lt;/a&gt;&lt;/td&gt; &lt;td&gt; &lt;button type="button" class="button cancel" name="btn_enail_cancel"&gt;&lt;span class="icon"&gt;&lt;/span&gt;&lt;span&gt;Remove&lt;/span&gt;&lt;/button&gt; &lt;/td&gt; &lt;/tr&gt; {foreachelse} &lt;tr id="row-nodata"&gt; &lt;td colspan="4"&gt;No recipients are associated with this email.&lt;/td&gt; &lt;/tr&gt; {/foreach} &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>I don't really where to look anymore and any help would be greatly appreciated !</p> <p>Thank you,</p> <p>Max</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMaxime Lepers
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload