2014-04-10 62 views
0

我正在使用jquery來驗證一些字段,並顯示錯誤消息,當所需的字段未填寫。在我的表格中,我有一個備用地址部分。如果用戶選擇備用地址的複選框,我需要使用街道,城市,州和郵編,並使用preventDefault停止表單提交,直到填寫完這些字段。如果選中備用地址複選框,則preventDefault方法將停止提交表單。如何繞過preventDefault方法

可以jQuery的專家看看我的代碼,讓我知道如何繞過preventDefault當備用地址複選框被選中,並且所有必填字段被正確填寫?

這裏是我的jQuery代碼:

<script type="text/javascript"> 
    var j$ = jQuery.noConflict(); 

    j$(document).ready(function() { 
     var submitButton = j$('[id$=btnSubmit]'); 
     var emailButton = j$('[id$=btnEmail]'); 
     var shippingMethod = j$('[id$=shippingMethod]'); 
     var alternateAddress = j$('[id$=chkbxAlternateAddress]'); 
     var alternateStreet = j$('[id$=alternateaddress]'); 
     var alternateCity = j$('[id$=alternatecity]'); 
     var alternateState = j$('[id$=alternatestate]'); 
     var alternateZip = j$('[id$=alternatezip]'); 
     submitButton.click(function(e){ 
      j$('[id$=documentQuantity]').each(function(index){ 
       if(j$(this).text() == '0') { 
        j$("#contentQtyError").css({"display":"inline"}); 
        j$(this).parent().parent().css({"background-color":"#FFFFCC"}); 
        e.preventDefault(); 
       } 
      });    
      if(shippingMethod.val() == '') { 
       if(j$('.shippingMethodErrorMsg').length == 0) { 
        shippingMethod.after("<span class='shippingMethodErrorMsg'>Error: A Shipping Method is Required</span>"); 
       } 
       e.preventDefault(); 
      } 
      else { 
       j$(".shippingMethodErrorMsg").remove(); 
      } 
      if(alternateAddress.attr("checked")) { 
       if(j$('.alternateStreetErrorMsg').length == 0) { 
        alternateStreet.after("<span class='alternateStreetErrorMsg'>Error: A Street Address is Required</span>"); 
       } 
       if(j$('.alternateCityErrorMsg').length == 0) { 
        alternateCity.after("<span class='alternateCityErrorMsg'>Error: A City is Required</span>"); 
       } 
       if(j$('.alternateStateErrorMsg').length == 0) { 
        alternateState.after("<span class='alternateStateErrorMsg'>Error: A State is Required</span>"); 
       } 
       if(j$('.alternateZipErrorMsg').length == 0) { 
        alternateZip.after("<span class='alternateZipErrorMsg'>Error: A Zip is Required</span>"); 
       } 
       e.preventDefault(); 
      } 
      else { 
       j$(".alternateStreetErrorMsg").remove(); 
       j$(".alternateCityErrorMsg").remove(); 
       j$(".alternateStateErrorMsg").remove(); 
       j$(".alternateZipErrorMsg").remove(); 
      } 
     }); 
     shippingMethod.change(function(){ 
      if(shippingMethod.val() == 'Email') { 
       emailButton.css({"display":""}); 
       submitButton.css({"display":"none"}); 
       j$('#containerAltAddressToggle').css({"display":"none"}); 
       j$('[id$=chkbxAlternateAddress]').attr('checked',false); 
       j$('[id$=alternateAddressPanel]').css({"display":"none"}); 
       j$('#containerCustomKitToggle').css({"display":"none"}); 
       j$('[id$=chkbxCustomKit]').attr('checked',false); 
       j$('[id$=customKitPanel]').css({"display":"none"});    
       j$('#containerPersonalNoteToggle').css({"display":"none"}); 
       j$('[id$=chkbxPersonalNote]').attr('checked',false); 
       j$('[id$=personalNotePanel]').css({"display":"none"}); 
       j$('#containerFollowUpTaskToggle').css({"display":"none"}); 
       j$('[id$=chkbxScheduleTask]').attr('checked',false); 
       j$('#recurrence').css({"display":"none"}); 
       j$('[id$=commentsBlock]').css({"display":"none"}); 
      } 
      else { 
       emailButton.css({"display":"none"}); 
       submitButton.css({"display":""}); 
       j$('#containerAltAddressToggle').css({"display":""}); 
       j$('#containerCustomKitToggle').css({"display":""});     
       j$('#containerPersonalNoteToggle').css({"display":""}); 
       j$('#containerFollowUpTaskToggle').css({"display":""}); 
       j$('[id$=nextTask]').val(""); 
       j$('[id$=commentsBlock]').css({"display":""});  
      }       
     }); 
     alternateAddress.change(function() { 
      if(alternateAddress.attr("checked") != "checked") { 
       j$(".alternateStreetErrorMsg").remove(); 
       j$(".alternateCityErrorMsg").remove(); 
       j$(".alternateStateErrorMsg").remove(); 
       j$(".alternateZipErrorMsg").remove(); 
      } 
     }); 
    }); 
</script> 

任何幫助表示讚賞。 謝謝!

回答

0

如果有表單,那麼在表單提交中使用事件偵聽器可能會更好。然後,做你想要的東西,這樣做:

$("form").submit(function(e) { 
    e.preventDefault(); 

    // do all of your validation 

    // if everything is OK, submit the form 
    $(this).submit(); 
}); 

看一看jQuery的文檔.submit()進一步的信息。

0

繞過preventdefoult必須在冒泡addEventListener('event',function,true);

添加監聽或設置CSS指針事件:無在HTML元素

#elementId{pointer-events: none} 

是刪除所有事件此元素

在這種情況下,我建議你使用一個簡單的按鈕而不是提交併使用$(「#elementId」)。通過代碼提交