在添加額外的文本字段之前驗證表單

如果您檢查我的FIDDLE HERE，則會有一個表單被正確驗證。你可以點擊提交按鈕來檢查它是如何工作的。在添加額外的文本字段之前驗證表單

還有一個名爲Add Person的按鈕，它創建一組文本字段。

我的問題是，添加人員按鈕只能在表單完全填充時才創建文本字段。如果表單沒有填寫並且用戶點擊添加人員按鈕，則應該顯示警報。

這裏是我的代碼

$.validator.setDefaults({ 
    submitHandler: function() { alert("submitted!"); } 
}); 

$().ready(function() { 
    // validate the comment form when it is submitted 
    $("#commentForm").validate(); 

    // validate signup form on keyup and submit 
    $("#signupForm").validate({ 
     rules: { 
      firstname: "required", 
      lastname: "required",   
      email: { 
       required: true, 
       email: true 
      }, 
      topic: { 
       required: "#newsletter:checked", 
       minlength: 2 
      }, 
      agree: "required", 
      'country': { 
    required: true 
} 
     }, 

     messages: { 
      firstname: "Please enter your firstname", 
      lastname: "Please enter your lastname", 
      username: { 
       required: "Please enter a username", 
       minlength: "Your username must consist of at least 2 characters" 
      }, 
      email: "Please enter a valid email address", 
      agree: "Please accept our policy", 
      country: "Please select an option" 
     } 
    }); 


clicks = 0; 
$('a').on('click', function() { 
    $('.attnd2').show(); 
    $('div.loop').show(); 
    if ($('div.loop').length < 5) { 
     clicks++; 
     if(clicks>1){ 
      newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 
     } 
     else{ 
     newLoopDiv = $($('div.loop')[0]).appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 


    } 

    } 
}); 
});

來源

2013-08-26 Sowmya

嘗試

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

    $('.attnd2').show(); 
    $('div.loop').show(); 
    if ($('div.loop').length < 5) { 
     clicks++; 
     if(clicks>1){ 
      newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
       $(element).attr('name', $(element).attr('name') + clicks); 
      }); 
     } 
     else{ 
      newLoopDiv = $($('div.loop')[0]).appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
       $(element).attr('name', $(element).attr('name') + clicks); 
      }); 


     } 

    } 
});

演示：Fiddle

來源

2013-08-26 07:58:40

但是，這仍然增加額外的領域，。我需要的是限制添加字段，直到整個表單被填充爲止 – Sowmya

@Sowmya現在修復了它，在條件 –

中錯過了'！'我需要在按鈕下面顯示msg。喜歡請在這之前填寫上述字段 – Sowmya

試試這個：Fiddle

$('a').on('click', function() { 

    if($('#firstname').val() != '' && $('#lastname').val() != '' && $('#email').val() != '' && $("#agree").prop('checked') == true && $('#country').val() != '') { 

    $('.attnd2').show(); 
    ('div.loop').show(); 
    if ($('div.loop').length < 5) { 
     clicks++; 
     if(clicks>1){ 
      newLoopDiv = $($('div.loop')[0]).clone().appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 
     } 
     else{ 
     newLoopDiv = $($('div.loop')[0]).appendTo(".container"); 
      $('input', newLoopDiv).each(function (index, element) { 
      $(element).attr('name', $(element).attr('name') + clicks); 
     }); 


    } 

    } 
    } else { 
     alert('Please fillup field before add'); 
    }  
});

來源

2013-08-26 08:00:24

您應該添加rules爲dynamically created elements像

$.validator.setDefaults({ 
    submitHandler: function(frm) { 
     var flag=true; 
     var $allElemReq=$("input[required],select[required]"); 
     for(var ind=0;ind<$allElemReq.length;ind++) 
     { 
      elem=$allElemReq[ind]; 
      if(!$(elem).val()) 
      { 
       flag=false; 
       $(frm).validate().element($(elem)); 
       break; 
      } 
     } 
     if(flag) 
      alert("submitted!"); 
     else 
      alert('Not submitted'); 
    } 
});

附加爲compulsory fields

小提琴添加required attribute：http://jsfiddle.net/rw9ns/22/

來源

2013-08-26 08:06:44

在添加額外的文本字段之前驗證表單

回答

相關問題