Question

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.

here is my 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();
    }

});

and here is the HTML of the concerned table :

<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. [e-mail])"/>
                                                    </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>

I don’t really where to look anymore and any help would be greatly appreciated !

Thank you,

Max

Answer 1

It’s not working correctly because you’ve wrapped the .validate() function within a click handler. This means the validation initializes only after the click when it should initialize upon loading of the page.

$('#btn-report_add').click(function(e) {
        e.preventDefault();
        // Validate new email form
        $("#weeklyReportsForm").validate({ // <- this only initializes validation after the click
        ...

Instead, this is more like how it should be done (see source code of official demos)…

Immediately initialize the Validation plugin on your form:

 $("#weeklyReportsForm").validate({

     // validation rules and options

     submitHandler: function(form) {
         // optional- stuff to do upon form submission
     }
 ...

 });

Bind your form’s submit to the click of your element:

 $('#btn-report_add').click(function(e) {

        e.preventDefault();

        // your other logic for click

        $("#weeklyReportsForm").submit();

 });

See: How do I get my jQuery Validator Code to run a second time after a form has already been submitted?