0

我正在尝试在表单上添加一些验证以添加联系人，但我似乎无法做到这一点。当您加载页面时，我的表单是隐藏的（使用 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. psmith@homebuilder.com)"/>
                                                    </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>

我真的不再去哪里看，任何帮助将不胜感激！

谢谢，

最大限度

4

1 回答 1

2

它无法正常工作，因为您已将.validate()函数包装在click处理程序中。这意味着验证仅在单击后才初始化，此时它应该在加载页面时进行初始化。

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

相反，这更像是应该如何完成（参见官方演示的源代码）......

立即在表单上初始化验证插件：

 $("#weeklyReportsForm").validate({

     // validation rules and options

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

 });

将您的表单绑定submit到您的元素的点击：

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

        e.preventDefault();

        // your other logic for click

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

 });

请参阅：如何在提交表单后让我的 jQuery 验证器代码再次运行？

于 2012-05-30T23:04:17.040 回答