2017-03-17 143 views
-1
jQuery(document).ready(function($) { 
    var WPJB = WPJB || {}; 
     $("#clickandpledge_cardNumber").on("keypress keyup blur",function(event) {  
      $(this).val($(this).val().replace(/[^\d].+/, "")); 
      if ((event.which < 48 || event.which > 57)) { 
       event.preventDefault(); 
      } 
      }); 
      $("#clickandpledge_cvc").on("keypress keyup blur",function(event) {  
      $(this).val($(this).val().replace(/[^\d].+/, "")); 
      if ((event.which < 48 || event.which > 57)) { 
       event.preventDefault(); 
      } 
      }); 
     jQuery('.wpjb-place-order').click(function(event) { 
     event.preventDefault(); 
     var $form = jQuery('.wpjb-place-order'); 
     var paymentmethod = $("input[name=cnp_payment_method_selection]:checked").val(); 
     var focusSet = false; 
     if(paymentmethod == 'CreditCard') 
     { 

      if($("input[name=clickandpledge_onetimeonly]:checked").val() == "clickandpledge_OneTimeOnly") 
      { 
      if($('#clickandpledge_nameOnCard').val() == '' && $('#clickandpledge_cardNumber').val() == '' && $('#clickandpledge_cvc').val() == '') 
      { 
      if($("#clickandpledge_nameOnCard").parent().next(".validation").length == 0) // only add if not added 
      { 
      alert('Please Enter Required fields'); 
      }   
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_nameOnCard').focus(); 
      focusSet = true; 
      //return false; 
      } 
      // Name on Card 
      if($('#clickandpledge_nameOnCard').val() == '') 
      { 
      if($("#clickandpledge_nameOnCard").parent().next(".validation").length == 0) // only add if not added 
      { 
      alert('Please Enter name on card'); 
      //$("#clickandpledge_nameOnCard").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter Name on Card</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_nameOnCard').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_nameOnCard').val() != '') 
      { 

      } 
      else 
      { 
      $("#clickandpledge_nameOnCard").parent().next(".validation").remove(); // remove it 
      } 
      // Credit Card Number 
      if($('#clickandpledge_cardNumber').val() == '') 
      { 
      if($("#clickandpledge_cardNumber").parent().next(".validation").length == 0) // only add if not added 
      { 
      alert('Please Enter Card number'); 
      //$("#clickandpledge_cardNumber").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter Credit Card number</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_cardNumber').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_cardNumber').val() != '') 
      { 

      } 
      else 
      { 
      $("#clickandpledge_cardNumber").parent().next(".validation").remove(); // remove it 
      } 
      // Credit CVV 
      if($('#clickandpledge_cvc').val() == '') 
      { 
      if($("#clickandpledge_cvc").parent().next(".validation").length == 0) // only add if not added 
      { 
      alert('Please Enter CVV of Card'); 
      //$("#clickandpledge_cvc").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter CVV</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_cvc').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_cvc').val() != '') 
      { 

      } 
      else 
      { 
      $("#clickandpledge_cvc").parent().next(".validation").remove(); // remove it 
      }   

      } 
      else 
      { 
    // Name on Card 
      if($('#clickandpledge_nameOnCard').val() == '') 
      { 
      if($("#clickandpledge_nameOnCard").parent().next(".validation").length == 0) // only add if not added 
      { 
      $("#clickandpledge_nameOnCard").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter Name on Card</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_nameOnCard').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_nameOnCard').val() != '') 
      { 

      } 
      else 
      { 
      $("#clickandpledge_nameOnCard").parent().next(".validation").remove(); // remove it 
      } 
      // Credit Card Number 
      if($('#clickandpledge_cardNumber').val() == '') 
      { 
      if($("#clickandpledge_cardNumber").parent().next(".validation").length == 0) // only add if not added 
      { 
      $("#clickandpledge_cardNumber").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter Credit Card number</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_cardNumber').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_cardNumber').val() != '') 
      { 

      } 
      else 
      { 
      $("#clickandpledge_cardNumber").parent().next(".validation").remove(); // remove it 
      } 
      // Credit CVV 
      if($('#clickandpledge_cvc').val() == '') 
      { 
      if($("#clickandpledge_cvc").parent().next(".validation").length == 0) // only add if not added 
      { 
      $("#clickandpledge_cvc").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter CVV</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_cvc').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_cvc').val() != '') 
      { 

      } 
      else 
      { 
      $("#clickandpledge_cvc").parent().next(".validation").remove(); // remove it 
      }   
} 
     } 
     else if(paymentmethod == 'eCheck') 
     { 
      // Routing number 
      if($('#clickandpledge_echeck_RoutingNumber').val() == '') 
      { 
      if($("#clickandpledge_echeck_RoutingNumber").parent().next(".validation").length == 0) // only add if not added 
      { 
      alert('Please enter Routing Number'); 
      //$("#clickandpledge_echeck_RoutingNumber").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter Routing Number</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_echeck_RoutingNumber').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_echeck_RoutingNumber').val() != '') 
      { 

      } 
      else 
      { 
      $("#clickandpledge_echeck_RoutingNumber").parent().next(".validation").remove(); // remove it 
      } 
      // Check Numbre 
      if($('#clickandpledge_echeck_CheckNumber').val() == '') 
      { 
      if($("#clickandpledge_echeck_CheckNumber").parent().next(".validation").length == 0) // only add if not added 
      { 
      alert('Please enter Check Number'); 
      //$("#clickandpledge_echeck_CheckNumber").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter Routing Number</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_echeck_CheckNumber').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_echeck_CheckNumber').val() != '') 
      { 

      } 
      else 
      { 
      $("#clickandpledge_echeck_CheckNumber").parent().next(".validation").remove(); // remove it 
      } 
      // Account Number 
      if($('#clickandpledge_echeck_AccountNumber').val() == '') 
      { 
      if($("#clickandpledge_echeck_AccountNumber").parent().next(".validation").length == 0) // only add if not added 
      { 
      alert('Please enter Account Number'); 
      //$("#clickandpledge_echeck_AccountNumber").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter Routing Number</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_echeck_AccountNumber').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_echeck_AccountNumber').val() != '') 
      { 

      } 
      else 
      { 
       $("#clickandpledge_echeck_AccountNumber").parent().next(".validation").remove(); // remove it 
      } 
      // RE-type Account Number 
      if($('#clickandpledge_echeck_retypeAccountNumber').val() == '') 
      { 
      if($("#clickandpledge_echeck_retypeAccountNumber").parent().next(".validation").length == 0) // only add if not added 
      { 
      alert('Please re-enter Account Number');  
      //$("#clickandpledge_echeck_retypeAccountNumber").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter Routing Number</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_echeck_retypeAccountNumber').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_echeck_retypeAccountNumber').val() != '') 
      { 

      } 
      else 
      { 
      $("#clickandpledge_echeck_retypeAccountNumber").parent().next(".validation").remove(); // remove it 
      } 
      // Name on Account eCheck 
      if($('#clickandpledge_echeck_NameOnAccount').val() == '') 
      { 
      if($("#clickandpledge_echeck_NameOnAccount").parent().next(".validation").length == 0) // only add if not added 
      { 
      alert('Please enter Name on Account'); 
      //$("#clickandpledge_echeck_NameOnAccount").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter Routing Number</div>"); 
      } 
      $.preventDefault(); // prevent form from POST to server 
      $('#clickandpledge_echeck_NameOnAccount').focus(); 
      focusSet = true; 
      //return false; 
      } 
      else if($('#clickandpledge_echeck_NameOnAccount').val() != '') 
      { 

      } 
      else 
      { 
       $("#clickandpledge_echeck_NameOnAccount").parent().next(".validation").remove(); // remove it 
      }   
     } else 
     { 

     }  
      $form.find('button').prop('disabled', true); 
      clickandpledgeTransaction();   
      return false; 
    }); 

我使用上面,形成验证并提交,验证空的工作,并同时警告"OK"提交按钮也提交,它不应该提交,防止表单提交我使用jQuery来防止表单提交当无法验证失败处理此请求..如何如果验证失败

我的主要问题是,当验证失败的形式不应submit..if验证失败时说:确定自动提交的按钮时,我收到警报消息..

+0

的onsubmit返回false –

+0

你真的应该看看使用jQuery验证。它将解决您的问题,并将所有代码转换为大约10行。 –

+0

你可以编辑你的问题来突出你的问题。 – Anil

回答

0

Jquery.validate是最好的方法提交

尝试此之前,验证所有字段:

<script> 

    $("#form").validate({ 
     errorElement: "em", 
     errorPlacement: function (error, element) { 

      $(element.parent("div").addClass("form-animate-error")); 
      error.appendTo(element.parent("div")); 
     }, 
     success: function (label) { 
      $(label.parent("div").removeClass("form-animate-error")); 
     }, 
     rules: { 
      txtTitle: "required", 
      validate_lastname: "required", 
      validate_username: { 
       required: true, 
       minlength: 2 
      }, 
      validate_password: { 
       required: true, 
       minlength: 5 
      }, 
      validate_confirm_password: { 
       required: true, 
       minlength: 5, 
       equalTo: "#validate_password" 
      }, 
      validate_email: { 
       required: true, 
       email: true 
      }, 
      validate_agree: "required" 
     }, 
     messages: { 
      City: "Please select city", 
      PropertyType: "Please select property type", 
      // ParkingType: "Please select parking type", 
      validate_firstname: "Please enter your firstname", 
      validate_lastname: "Please enter your lastname", 
      validate_username: { 
       required: "Please enter a username", 
       minlength: "Your username must consist of at least 2 characters" 
      }, 
      validate_password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long" 
      }, 
      validate_confirm_password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long", 
       equalTo: "Please enter the same password as above" 
      }, 
      validate_email: "Please enter a valid email address", 
      validate_agree: "Please accept our policy" 
     } 
    }); 
</script> 
+1

*尝试类似这个:*不教OP任何东西 –