在添加循環div之前驗證表單

我有一個表單，它具有所有必填字段。我有一個名爲Add person的按鈕來創建額外的字段來輸入額外人員的詳細信息。在添加循環div之前驗證表單

你可以通過點擊提交按鈕來確認驗證。

如果你點擊添加人員按鈕，它不會生成一個額外的字段的div，除非上述2個字段填充（地址和郵政編碼）。

所以我需要的是我需要顯示一個警報，以及添加人員按鈕時單擊。

當用戶點擊添加按鈕時，它不應該允許它們生成另一個div（.loop），除非以前的人員詳細信息被填滿。

這裏是代碼和DEMO

$().ready(function() { 
    $("#signupForm").validate({ 
     rules: {    
      address: { 
       required: true, 
      }, 
      zip: { 
       required: true, 
       number: true 
      },  

     }, 
     messages: {   
      address: { 
       required: "<br />Please provide your address", 
      }, 
      zip: "<br />Please enter valid ZIP",   
     } 
    }); 

    var c = 0; 

    function HTMLloop(c) { 
     return '<div class="loop">\ 
        <strong>Person ' + c + '</strong><br/> \ 
        <input type="text" name="firstName' + c + '"/> \ 
        <input type="text" name="lastName' + c + '"/> \ 
        <input type="text" name="mail' + c + '"/> \ 
        <input type="text" name="company' + c + '"/> \ 
        <input type="text" name="company' + c + '"/> \ 
        <div class="remove">remove</div> \ 
       </div>'; 
    } 

    $('.test').on('click', function() { 
     if(!$("#signupForm").valid()){ 
      return; 
     } 

     if (c<5) $('#loops').append(HTMLloop(++c)); 
    }); 
    $('#loops').on('click','.remove', function() { 
     $(this).closest('.loop').remove(); 
     c--; 
     $('#loops').find('.loop').each(function(i,e){ 
      $('strong', this).text($('strong', this).text().replace(/\d+/g , ' '+(i+1))); 
      $('input', this).each(function(){ 
       this.name = this.name.replace(/\d+/g , (i+1)); 
      }); 
     }); 
    }); 
});

來源

2013-08-27 Sowmya

那麼你現在有什麼問題？你想通過點擊添加人員按鈕來顯示一條警告消息嗎？ – deepakb

是的。基本上2件事情應該發生首先是顯示空白字段和警告框的vaidation msg。第一個是在那裏碰巧，我需要的是顯示警告框和下一次點擊添加人時的相同過程 – Sowmya

檢查[this]（http://jsfiddle.net/rw9ns/40/） – deepakb

檢查this。

$('.test').on('click', function() { 
    if(!$("#signupForm").valid()){ 
     alert("Please enter mandatory fields."); 
     return; 
    } 

    if (c<5) $('#loops').append(HTMLloop(++c)); 
});

在上述情況下，您可以檢查是否有任何字段爲空，那麼您不允許添加另一個字段。希望這會幫助你。

來源

2013-08-27 12:18:42 deepakb

在添加循環div之前驗證表單

回答

相關問題