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"提交按钮也提交，它不应该提交和阻止表单提交我无法在验证失败时处理此请求。
我的主要问题是当验证失败时，表单不应该提交..如果验证失败，我会在确定自动提交按钮时收到提醒信息..
答案 0 :(得分：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>