Validate JavaScript the registration ,user login, user profile and payment by credit card pages using JavaScript.
PAYMENT BY CREDIT CARD
<html>
<head>
<script>
function valideForm()
{
var firstName=document.getElementById("firstName");
var lastName=document.getElementById("lastName");
var email=document.getElementById("email");
var postcode=document.getElementById("postcode");
var paymentType=document.getElementById("paymentType");
var exMonth=document.getElementById("exMonth");
var exYear=document.getElementById("exYear");
var date=new Data();
var month=date.getMonth();
var year=date.getFullYear();
var cardNumber=document.getElementById("cardNumber");
if(firstName.value===""){
alert("please enter your first name");
firstName.focus();
return false;
}
if(lastName.value===""){
alert("please enter your last name");
lastName.focus();
return false;
}
if(email.value.indexOf(".")==-1||email.value.indexOf("@")==-1){
alrt("please include a valid email address");
email.focus();
return false;
}
if(postcode.value.length!=6||isNan(postcode.value));{
alert("please enter 6 numbers for your postcode");
postcode.focus();
if(paymentTypee.selectedIndex===0){
alert("please select payment type");
return false;
}
if(exMonth.selectedIndex===0){
alert("please select the month");
return false;
}
if(year>exYear||(year===exYear&&month>=exMonth)){
alert("The expiry date is before today's date.Please selecta valid expiry date");
return false;
}
if(cardNumber.value.length!=6||isNaN(cardNumber.value))
{
alert("Please enter 16 numbers for your credit number");
cardNumber.focus();
return false;
}
alert("Thank you for your submission");
return false;
}</script>
</head>
<body>
<form name="myForm"autocomplete="on" onsubmit="return validateForm()">
<p><label>First name (required)<input type="text"id="firstName autofocus="autofocus"/></label></p>
<p><label>Last name (required)<input type="text"id="lastName autofocus="autofocus"/></label></p>
<p>Email address (required)
<input type="text"id="email"/></p>
<p>Postcode (required)
<input type="text"id="postcode"/></p>
<P>Payment type (required)
<select id="paymentType "title="Choose a pament type">
<option value="0>select a payment option</option>
<option value="visa">VISA</option>
<option value="master">Mastercard</option>
<option value="amer">American Express</option>
</select>
</p>
<P>Expiry date (required)
<select id="exMonth"title="select a month">
<option value="0">Enter month</opton>
<option value="01">January</opton>
<option value="02">February</opton>
<option value="03">March</opton>
<option value="04">April</opton>
<option value="05">May</opton>
<option value="06">June</opton>
<option value="07">July</opton>
<option value="08">August</opton>
<option value="09">September</opton>
<option value="10">October</opton>
<option value="11">November</opton>
<option value="12">December</opton>
</select>
<select id="exYear"title="select a year">
<option value="0">Enter year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
/select>
</p>
<p><label>Credit card number (required)
<input type="text" id="cardNumber"/></label></p>
<div id="centreing">
<input type="submit" name="s1" value="Submit response"/>
<input type="reset" name="reset" value=" Clear form"/>
</div>
</form>
</body>
</html>
0 Comments