$(document).ready(function(){
var form = $("#Form-3");
var FName = $("#fname"); //Creates Variables for elements in form
var Tele = $("#tele");
var Address = $("#address");
var Email = $("#email");
var Credit = $("#Card")
var regexp = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_.-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9.]+.[a-z]{2,4}$/; //ragex code- used to validate email
FName.blur(validateFName); //blur is a method which attaches a functiom to run when an event occurs
Email.blur(validateEmail);
Tele.blur(validateTele);
Address.blur(validateAddress);
Credit.blur(validateCard);
form.submit (function(){
if (validateFName() & validateTele() & validateEmail() & validateAddress() & validateCard()){ //If it passes all of these then return true
return true;
}
else {
return false;
}
});
function validateCard(){ //Validates Credit Card
var Visa = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/; //Ragex code for Credit Cards
var MasterCard = /^(?:5[1-5][0-9]{14})$/;
var CC = Credit.val();
$("#Visa").click(function() { //Tick Radio Button
$("#Card").show();
if (Visa.test(CC) ){ // If user input is equal to both Visa Or Mastercard Then Valid
document.getElementById("CardError").textContent ="";
return true;
}
});
$("#Master").click(function() { //Checks MasterCard button.
$("#Card").show();
if(MasterCard.test(CC)){
document.getElementById("CardError").textContent =""; //Display Error
return true;
}
else {
document.getElementById("CardError").textContent ="Please Ensure Card Detail Is Correct"; //Display Error
return false;
}
});
}
});
<label for="Card">Credit Card (16 Digit Number)</label>
<br/>
<input type="radio" id="Visa" name="Type1">
<label>Visa</label>
<br/>
<input type="radio" id="Master" name="Type1">
<label>MasterCard</label>
<input id="Card" name="Card" type="text" hidden="true" />
<label id="CardError"></label>
在这里我有两个收音机按钮一个用于Visa卡而另一个用于万事达卡我想要它当用户点击签证单选按钮时只有签证验证工作而不是万事达卡号反之亦然,现在什么也没发生,但是我可以当用户点击Visa或万事达卡时,两个验证都适用,即当选择万事达卡无线电按钮时,Visa验证工作正常。我怎样才能将其专门设置为一种验证形式?
答案 0 :(得分:0)
JavaScript中有错误。更改脚本的这一部分:
}
});
else {
document.getElementById("CardError").textContent ="Please Ensure Card Detail Is Correct"; //Display Error
return false;
}
对此:
} else {
document.getElementById("CardError").textContent ="Please Ensure Card Detail Is Correct"; //Display Error
return false;
}
});
<强>段强>
function validateCard() { //Validates Credit Card
var Visa = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/; //Ragex code for Credit Cards
var MasterCard = /^(?:5[1-5][0-9]{14})$/;
var CC = Credit.val();
$("#Visa").click(function() { //Tick Radio Button
$("#Card").prop("hidden", false).removeAttr("hidden");
console.log("Hi");
if (Visa.test(CC)) { // If user input is equal to both Visa Or Mastercard Then Valid
document.getElementById("CardError").textContent = "";
return true;
}
});
$("#Master").click(function() { //Checks MasterCard button.
$("#Card").show();
if (MasterCard.test(CC)) {
$("#CardError").text(); //Display Error
return true;
} else {
$("#CardError").text("Please Ensure Card Detail Is Correct"); //Display Error
return false;
}
});
}
validateCard();
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<label for="Card">Credit Card (16 Digit Number)</label>
<br/>
<input type="radio" id="Visa" name="Type1">
<label>Visa</label>
<br/>
<input type="radio" id="Master" name="Type1">
<label>MasterCard</label>
<input id="Card" name="Card" type="text" hidden="true" />
<label id="CardError"></label>