Jquery Validation - 多次验证隐藏区域中的字段答案

【问题标题】：Jquery Validation - Validate several time a field in a hidden areaJquery Validation - 多次验证隐藏区域中的字段
【发布时间】：2012-05-30 22:40:01
【问题描述】：

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

我真的不知道去哪里了，任何帮助都将不胜感激！

谢谢，

最大

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

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

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

相反，这更像是应该怎么做（见official demos的源代码）...

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

 $("#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();

 });

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

【讨论】：

@dSquared，谢谢。看来我最近在这里看到了很多同样的问题。也许有一个论坛或博客在某个地方发布了这种有严重缺陷的做法。
感谢@dSquared 的帮助。它现在几乎可以工作了。我只需要修改其他一些不再按预期工作的功能。
@MaximeLepers，我是 Sparky，不是 dSquared，但我知道你的意思。不客气。