For the code below can you varify the card number, card exp date, card cvv and address for example the card number should be 13 numbers if any more it should say "invalid" for the card exp date it should be like 12/35 if not then its invalid for card cvv it should only be 3 numbers and address should be like 11-11-11st as long as it has the "-" and "st" also when ever its invalid can you make it print on the bottom of the box like the example in the image below.
For the code below can you varify the card number, card exp date, card cvv and address
for example the card number should be 13 numbers if any more it should say "invalid"
for the card exp date it should be like 12/35 if not then its invalid
for card cvv it should only be 3 numbers
and address should be like 11-11-11st as long as it has the "-" and "st"
also when ever its invalid can you make it print on the bottom of the box like the example in the image below.
thank you
<!DOCTYPE html>
<html>
<head>
<style>
input {
height: 25px;
border-radius: 5px;
}
</style>
<script>
function validate() {
if (!validateVal(document.getElementById("number").value)) {
alert("Please Enter the number");
return;
}
var num = parseInt(document.getElementById("number").value);
if (num < 1 || num > 9) {
alert("Enter a number between 1 and 9(Including 1 and 9)");
return;
}
if (!validateVal(document.getElementById("name").value)) {
alert("Please Enter the Name");
return;
}
if (!validateVal(document.getElementById("email").value)) {
alert("Please Enter the Email Adderss");
return;
}
if (!ValidateEmail(document.getElementById("email").value)) {
return;
}
if (!validateVal(document.getElementById("Phonenumber").value)) {
alert("Please Enter the Phone Number");
return;
}
if (!validateVal(document.getElementById("CardNumber").value)) {
alert("Please Enter the Card Number");
return;
}
if (!validateVal(document.getElementById("CardExpDate").value)) {
alert("Please Enter the Card Expiration Date");
return;
}
if (!validateVal(document.getElementById("CardCVV").value)) {
alert("Please Enter the Card CVV");
return;
}
if (!validateVal(document.getElementById("Address").value)) {
alert("Please Enter the Address");
return;
}
alert("Validation Success");
}
function validateVal(val) {
if (val != null && val != undefined && val != "") {
return true;
} else {
return false;
}
}
function ValidateEmail(mail) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail)) {
return (true)
}
alert("You have entered an invalid email address!")
return (false)
}
</script>
</head>
<body>
<div class="g">
<div class="n">
<div class="r">
<img class="a" src="#">
<div class="p">+</div>
<form id="result" action="#">
<input type="text" id="number" placeholder="Choose from item 1-9">
<input type="text" id="name" placeholder="Name">
<input type="email" emailplaceholder="E-mail@gmial.com" id="email">
<input id="Phonenumber" type="text" placeholder="Phone number">
<input id="CardNumber" type="text" placeholder="Card Number">
<input id="CardExpDate" type="text" placeholder="Card Exp Date">
<input id="CardCVV" type="text" placeholder="Card CVV">
<input id="Address" type="text" placeholder="Address">
<div class="sub"> <a onclick="validate()" button> Submit</a></div>
</form>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>


Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 6 images









