jquery驗證 - 驗證隱藏區域中的幾個字段

Question

我想添加一些驗證的表單添加聯繫人，我似乎無法做到正確。 當您加載頁面時，我的表單被隱藏（使用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> 

我真的不哪裏找了任何幫助，將不勝感激！

謝謝

最大

Answer 1

，因爲你已經包裹click處理程序中的.validate()功能它不能正常工作。這意味着驗證只有在加載頁面時進行初始化時才進行初始化。

$('#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?