Confirm Message Box Issue and Reset Button Issue - javascript

My question is twofold. First, I can't seem to figure out how to get my confirm message box's ok and cancel to work correctly. The assignment calls for me to run the message, then validate my info, and if it validates, alert for ok or cancel. I have done it the other way around (validate....message....alert), but I'm not sure how to do this.
Second, my reset button clears my info whether I hit ok or cancel??? Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--Document Head-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--Title Element-->
<title>Greendale Community College</title>
<!--Style Element-->
<style type="text/css">
body {
background-color: white;
}
h1 {
text-align: center;
font-family: Impact;
color: green;
}
p {
font-size: 36px;
color: green;
}
</style>
<!--Script Element-->
<script type="text/javascript">
/* <![CDATA[ */
function submitRegistration() {
var fName = document.registration.firstName.value;
var lName = document.registration.lastName.value;
var cwid = document.registration.cwid.value;
var semester = document.registration.semester.value;
var course = document.registration.courses.value;
var section = document.registration.section.value;
var major = document.registration.needForMajor.value;
var semesterDisplay;
if (semester == "fall")
semesterDisplay = "Fall";
if (semester == "spring")
semesterDisplay = "Spring";
if (semester == "summer")
semesterDisplay = "Summer";
var checkDisplay;
if (document.registration.needForMajor.checked == true) {
checkDisplay = "Course Needed For Major";
}
else {
checkDisplay = "";
}
window.confirm("Student Name: " + fName + " " + lName + " CWID: " + cwid + " Semester: " + semesterDisplay + " Course: " + course + " Section: " + section + " " + checkDisplay);
if (fName == "") {
window.alert("You must enter your first name!");
return false;
}
if (isNaN(fName) == false) {
window.alert("Your First Name must be non-numeric values!");
return false;
}
if (lName == "") {
window.alert("You must enter your last name!");
return false;
}
if (isNaN(lName) == false) {
window.alert("Your Last Name must be non-numeric values!");
return false;
}
if (cwid == "") {
window.alert("You must enter your cwid!");
return false;
}
if (isNaN(cwid) == true) {
window.alert("Your CWID must be numeric values!");
return false;
}
var validateSemester = false;
for (var i = 0; i < 3; ++i) {
if (document.registration.semester[i].checked == true) {
validateSemester = true;
break;
}
}
if (validateSemester != true) {
window.alert("You must select a Semester!");
return false;
}
if (course == "") {
window.alert("You must select a Course!");
return false;
}
if (section == "") {
window.alert("You must select a Section!");
return false;
}
if (true) {
window.alert("You have been registered for your course!");
}
else {
window.alert("Your registration has been canceled.");
}
}
function resetRegistration() {
var resetForm = window.confirm("Are you sure you want to reset the form?");
if (resetForm == true)
return true;
return false;
}
/* ]]> */
</script>
</head>
<body>
<!--Heading Element-->
<h1>Greendale Community College</h1>
<center><img src="greendale.jpg" alt="greendale" width="512" height="256" /></center>
<h2 align="center">Course Registration Page</h2>
<form action="FormProcessor.html" name="registration" method="get"
onsubmit="submitRegistration();"
onreset="resetRegistration()">
<h3>Student Information Form</h3>
<!--Student Information-->
First Name:<input type="text" name="firstName"><br>
Last Name:<input type="text" name="lastName"><br>
CWID:<input type="text" name="cwid"><br>
<h3>Semester</h3>
<h4>(choose a semester)</h4>
<!--Radio Buttons to Choose Semester-->
<input type="radio" name="semester" value="fall" /> Fall 2018 <br />
<input type="radio" name="semester" value="spring" /> Spring 2018 <br />
<input type="radio" name="semester" value="summer" /> Summer 2018 <br />
<h3>Courses</h3>
<h4>(choose one course)</h4>
<table>
<!--Drop Down Box for Courses-->
<tr><td style="background:white;border:0">Courses:</td>
<tr>
<td>
<select name="courses" size="1">
<option value=""></option>
<option value="CIS 110">Intro to CIS</option>
<option value="CIS 120">Application Prog I</option>
<option value="CIS 299">System Analysis I</option>
<option value="CIS 330">Web Programming I</option>
<option value="CIS 304">Cobol</option>
</select>
</td>
</tr>
</table>
<h3>Sections</h3>
<h4>(choose one section)</h4>
<table>
<tr><td style="background:white;border:0">Section Numbers:</td>
<tr>
<td>
<select name="section" multiple="multiple" size="5">
<option value="001">CIS 110 001</option>
<option value="gw1">CIS110 GW1</option>
<option value="001">CIS 120 001</option>
<option value="gw1">CIS 120 GW1</option>
<option value="gw1">CIS 302 GW1</option>
<option value="001">CIS 304 001</option>
<option value="gw1">CIS 303 GW1</option>
<option value="001">CIS 321 001</option>
<option value="gw1">CIS 321 GW1</option>
<option value="gw1">CIS 322 GW1</option>
</select>
</td>
</tr>
</table>
<input type="checkbox" name="needForMajor" />
Check if the course is required for your major!<br />
<!--Submit and Reset Buttons Created-->
<input type="submit" name="submit" onsubmit="submitRegistration();" value="Submit"><br />
<input type="reset" name="reset" onreset="resetRegistration();" value="Reset">
</form>
</body>
</html>

I got it: I forgot to use return:
<form action="FormProcessor.html" name="registration" method="get"
onsubmit="return submitRegistration();"
onreset="return resetRegistration()">
instead of:
<form action="FormProcessor.html" name="registration" method="get"
onsubmit="submitRegistration();"
onreset="resetRegistration()">

Try below solution. It should work.
<html xmlns="http://www.w3.org/1999/xhtml">
<!--Document Head-->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--Title Element-->
<title>Greendale Community College</title>
<!--Style Element-->
<style type="text/css">
body {
background-color: white;
}
h1 {
text-align: center;
font-family: Impact;
color: green;
}
p {
font-size: 36px;
color: green;
}
</style>
<!--Script Element-->
<script type="text/javascript">
/* <![CDATA[ */
function submitRegistration() {
var fName = document.registration.firstName.value;
var lName = document.registration.lastName.value;
var cwid = document.registration.cwid.value;
var semester = document.registration.semester.value;
var course = document.registration.courses.value;
var section = document.registration.section.value;
var major = document.registration.needForMajor.value;
var semesterDisplay;
if (semester == "fall")
semesterDisplay = "Fall";
if (semester == "spring")
semesterDisplay = "Spring";
if (semester == "summer")
semesterDisplay = "Summer";
var checkDisplay;
if (document.registration.needForMajor.checked == true) {
checkDisplay = "Course Needed For Major";
}
else {
checkDisplay = "";
}
if (fName == "") {
window.alert("You must enter your first name!");
return false;
}
if (isNaN(fName) == false) {
window.alert("Your First Name must be non-numeric values!");
return false;
}
if (lName == "") {
window.alert("You must enter your last name!");
return false;
}
if (isNaN(lName) == false) {
window.alert("Your Last Name must be non-numeric values!");
return false;
}
if (cwid == "") {
window.alert("You must enter your cwid!");
return false;
}
if (isNaN(cwid) == true) {
window.alert("Your CWID must be numeric values!");
return false;
}
var validateSemester = false;
for (var i = 0; i < 3; ++i) {
if (document.registration.semester[i].checked == true) {
validateSemester = true;
break;
}
}
if (validateSemester != true) {
window.alert("You must select a Semester!");
return false;
}
if (course == "") {
window.alert("You must select a Course!");
return false;
}
if (section == "") {
window.alert("You must select a Section!");
return false;
}
var confirmation = window.confirm("Student Name: " + fName + " " + lName + " CWID: " + cwid + " Semester: " + semesterDisplay + " Course: " + course + " Section: " + section + " " + checkDisplay);
if (confirmation) {
window.alert("You have been registered for your course!");
return true;
}
else {
window.alert("Your registration has been canceled.");
return false;
}
}
function resetRegistration() {
var resetForm = confirm("Are you sure you want to reset the form?");
if (resetForm == true)
return true;
return false;
}
/* ]]> */
</script>
</head>
<body>
<!--Heading Element-->
<h1>Greendale Community College</h1>
<center><img src="greendale.jpg" alt="greendale" width="512" height="256" /></center>
<h2 align="center">Course Registration Page</h2>
<form action="FormProcessor.html" name="registration" method="get" onsubmit="return submitRegistration();" onreset="return resetRegistration();">
<h3>Student Information Form</h3>
<!--Student Information-->
First Name:<input type="text" name="firstName"><br>
Last Name:<input type="text" name="lastName"><br>
CWID:<input type="text" name="cwid"><br>
<h3>Semester</h3>
<h4>(choose a semester)</h4>
<!--Radio Buttons to Choose Semester-->
<input type="radio" name="semester" value="fall" /> Fall 2018 <br />
<input type="radio" name="semester" value="spring" /> Spring 2018 <br />
<input type="radio" name="semester" value="summer" /> Summer 2018 <br />
<h3>Courses</h3>
<h4>(choose one course)</h4>
<table>
<!--Drop Down Box for Courses-->
<tr><td style="background:white;border:0">Courses:</td>
<tr>
<td>
<select name="courses" size="1">
<option value=""></option>
<option value="CIS 110">Intro to CIS</option>
<option value="CIS 120">Application Prog I</option>
<option value="CIS 299">System Analysis I</option>
<option value="CIS 330">Web Programming I</option>
<option value="CIS 304">Cobol</option>
</select>
</td>
</tr>
</table>
<h3>Sections</h3>
<h4>(choose one section)</h4>
<table>
<tr><td style="background:white;border:0">Section Numbers:</td>
<tr>
<td>
<select name="section" multiple="multiple" size="5">
<option value="001">CIS 110 001</option>
<option value="gw1">CIS110 GW1</option>
<option value="001">CIS 120 001</option>
<option value="gw1">CIS 120 GW1</option>
<option value="gw1">CIS 302 GW1</option>
<option value="001">CIS 304 001</option>
<option value="gw1">CIS 303 GW1</option>
<option value="001">CIS 321 001</option>
<option value="gw1">CIS 321 GW1</option>
<option value="gw1">CIS 322 GW1</option>
</select>
</td>
</tr>
</table>
<input type="checkbox" name="needForMajor" />
Check if the course is required for your major!<br />
<!--Submit and Reset Buttons Created-->
<input type="submit" name="submit" value="Submit"><br />
<input type="reset" name="reset" value="Reset">
</form>
</body>
</html>

Related

Submit Button Not working but if I remove its JavaScript it works

This is my index.html file. It has JavaScript but when JavaScript validation works >Submit button doesn't perform any action. But when I remove JavaScript code it submits the data to the database.
I need to understand where my code has faults or mistakes and why this is happening. How to validate that the arrival date should be smaller than the departure date.
<!DOCTYPE html>
<head>
<title>Book Accomodations</title>
<link rel="stylesheet" href="style.css">
<script>
function validate(){
var x =document.forms["myform"]["fname"].value;
var y =document.forms["myform"]["lname"].value;
var email =document.forms["myform"]["email"].value;
var filter = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var getSelectedValue = document.querySelector( 'input[name="payment"]:checked');
if (x == "" || x == null) {
alert("First Name must be filled out");
return false;
} else if (y == "" || y == null) {
alert(" Last Name must be filled out");
return false;
}
else if (!email.match(filter)) {
alert(" Enter Proper Email ID");
return false;
}
else if(document.getElementById("country").value == "")
{
alert("Please select a country");
return false;
} else if(getSelectedValue == null) {
alert("Select Payment Mode")
return false;
}
return false;
}
</script>
</head>
<body>
<div class="form">
<form name ="myform" action="function.php" onsubmit="return validate();" id="form" method="POST" >
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" /><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lname" /><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" /><br>
<label for="arrival">Arrival Date:</label>
<input type="date" id="arrival " name="adate" ><br>
<label for="departure">Departure Date:</label>
<input type="date" id="departure " name="ddate" />
<br>
<label for="country">Choose a Country:</label>
<select id="country" name="country" form="myform" >
<option disabled selected value> -- select an option -- </option>
<option value="India">India</option>
<option value="U.S.A.">U.S.A.</option>
<option value="Nepal">Nepal</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Germany">Germany</option>
<option value="Spain">Spain</option>
<option value="Italy">Italy</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="China">China</option>
</select>
<p>Payment Mode:</p>
<input type="radio" id="deb"
name="payment" value="Debit" />
<label for="deb">Debit Card</label>
<input type="radio" id="cred"
name="payment" value="Credit"/>
<label for="Credit">Credit Card</label>
<br>
<input type="submit" id="submit" name="submit" value="submit" style="width: 100px;"/>
<input type="reset" value="Reset" style="width: 100px; "/>
</form> </div>
</body>
You should return true at the end of your validate() function if your validation was successful. Right now you always return false. Thats why the button doesn´t seams to work.
Seems like you missed something.
You should return true after succesfull validation.
if (x == "" || x == null) {
alert("First Name must be filled out");
return false;
} else if (y == "" || y == null) {
alert("Last Name must be filled out");
return false;
} else if (!email.match(filter)) {
alert("Enter Proper Email ID");
return false;
} else if (document.getElementById("country").value == "") {
alert("Please select a country");
return false;
} else if (getSelectedValue == null) {
alert("Select Payment Mode")
return false;
} else {
return true;
}
Or just return true after if-else statement.

Radio button validation and Selector list validation in jQuery

$(document).ready(function () {
$("#mysubmit").click(function (){
$("#first_name").text("");
$("#last_name").text("");
$("#message").text("");
var myFirst = $("#first_name").val();
var fName = "";
var myLast = $("#last_name").val();
var lName = "";
var radioVal = $("input[name='gender']:checked").val();
var myGender = "";
var years = $("#years option:selected").val();
var myYears = "";
if (myFirst == "")
{
$("#first_error").text("You must Enter a First Name");
$("#first_name").focus();
}
else {
fName += "Employment Stats for " + $("#first_name").val() + " ";
}
if (myFirst !== "" && myLast == "")
{
$("#first_error").text("");
$("#last_error").text("You must Enter a Last Name");
$("#last_name").focus();
}
else {
lName += $("#last_name").val();
}
if (myLast !== "" & radioVal == "")
{
$("#gender_error").text("You must choose a Gender");
return false;
}
else {
console.log(radioVal)
myGender += "You are a: " + radioVal;
}
if (radioVal !== "" && years == "-")
{
$("#years_error").text("You Must enter amount of Years");
}
else {
myYears += $("#years").text("You have: " + years + " years experience");
console.log(years)
}
//yellow textbox for end message after submit
if (myFirst !== "" && myLast !== "" && myGender !== "" && years !== "-")
{
$("#message").css("backgroundColor", "yellow");
$("#message").text(fName + lName + myGender + myYears);
}
})
})
/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 10;
padding: 10;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 650px;
background-color: silver;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}
.error {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Assignment 6</title>
<link rel="stylesheet" href="Assignment_6.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Assignment_6.js"></script>
</head>
<body>
<div id="top">
<h1>Assignment 6</h1>
<h3>Enter Employment Statistics</h3>
<form>
<br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
<br>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
<br>
Male <input type="radio" name="gender" value="M">
Female <input type="radio" name="gender" value="F"> <span class="error" id="gender_error"></span>
<br>
Years Experience:
<select id="years" size="1">
<option value="-">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<span class="error" id="years_error"></span>
<br><br>
<input type="button" id="mysubmit" value="Submit Form">
<br>
</form>
</div>
<div id="message">
</div>
</body>
</html>
I'm having trouble figuring out form validation using jQuery. I'm supposed to have an error message pop up one by one in the fields if something is not filled out.
For example, if the first name is not filled out, on submit it shows the error message for first name and so forth for the rest.
I'm having issues getting the radio button and the selector list to show an error message and to retrieve the value to then place into my end message. Would anyone be able to assist me with this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Assignment 6</title>
<link rel="stylesheet" href="Assignment_6.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Assignment_6.js"></script>
</head>
<body>
<div id="top">
<h1>Assignment 6</h1>
<h3>Enter Employment Statistics</h3>
<form>
<br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
<br>
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
<br>
Male <input type="radio" name="gender" value="M">
Female <input type="radio" name="gender" value="F"> <span class="error" id="gender_error"></span>
<br>
Years Experience:
<select id="years" size="1">
<option value="-">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<span class="error" id="years_error"></span>
<br><br>
<input type="button" id="mysubmit" value="Submit Form">
<br>
</form>
</div>
<div id="message">
</div>
</body>
</html>
js:
$(document).ready(function () {
$("#mysubmit").click(function (){
$("#first_name").text("");
$("#last_name").text("");
$("#message").text("");
var myFirst = $("#first_name").val();
var fName = "";
var myLast = $("#last_name").val();
var lName = "";
var radioVal = $("input[name='gender']:checked").val();
var myGender = "";
var years = $("#years option:selected").val();
var myYears = "";
if (myFirst == "")
{
$("#first_error").text("You must Enter a First Name");
$("#first_name").focus();
}
else {
fName += "Employment Stats for " + $("#first_name").val() + " ";
}
if (myFirst !== "" && myLast == "")
{
$("#first_error").text("");
$("#last_error").text("You must Enter a Last Name");
$("#last_name").focus();
}
else {
lName += $("#last_name").val();
}
if (myLast !== "" & radioVal == "")
{
$("#gender_error").text("You must choose a Gender");
return false;
}
else {
console.log(radioVal)
myGender += "You are a: " + radioVal;
}
if (radioVal !== "" && years == "-")
{
$("#years_error").text("You Must enter amount of Years");
}
else {
myYears += $("#years").text("You have: " + years + " years experience");
console.log(years)
}
//yellow textbox for end message after submit
if (myFirst !== "" && myLast !== "" && myGender !== "" && years !== "-")
{
$("#message").css("backgroundColor", "yellow");
$("#message").text(fName + lName + myGender + myYears);
}
})
})
css:
/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 10;
padding: 10;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 650px;
background-color: silver;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}
.error {
color: red;
}
The issue is you're testing for a blank value, when what is actually getting returned is undefined. That is because you're asking for the value of something that doesn't yet exist - in this case, a selected radio button.
When no radio button is selected, there is no value for
var radioVal = $("input[name='gender']:checked").val(); and so it's undefined.
I see you have a variable ready, but it's testing the wrong thing, here is my suggested change:
var radioVal = $("input[name='gender']:checked");
// this creates an array of elements
var genderIsSelected = radioVal.length > 0;
// if that array has something in it, the gender was selected
var myGender = genderIsSelected ? radioVal[0].val() : '';
// populate myGender with the actual value, or blank
The same error is happening for your select menu validation.

The form just don't submit even if after all field is filled and checked

I am a beginner student in web design and this is a project I was given but no matter what I do the form just won't submit. even if all the input is correct it still doesn't do anything after I click submit. Any help is appreciated. I have googled for an hour but nothing I do works.
This is just a simple structure of a form. My main goal is to validate the code and sent to a PHP script.
<html>
<head>
<title>Form</title>
<style>
h1,h2 {
color:red;
text-align:center;
}
#form {
padding-left: 80px;
}
.fullname{
//border:1px solid;
padding:0 0 0 80px;
margin:0;
color:red;
font-style:italic;
font-size:13px;
white-space:nowrap;
//float:left;
//visibility:hidden;
}
.N {
//border-color:red;
border-radius:5px;
//text-shadow:0 0 2px #ddd;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<!--onSubmit="return !!(validateFName() & validateLName() & validateGender() & validateMonth() & validateDay() & validateYear());" -->
<form id="form" name="myForm" action="new1.php" onSubmit="return validateName()" >
First Name:<input class="N" type="text" name="fname" value="enter name
here" /><br>
<div id="errorFName" class="fullname"></div>
Last Name:<input class="N" type="text" name="lname" value="enter name here"/><br>
<div id="errorLName" class="fullname"></div>
Gender:<br>
<input type="radio" name="sex" value="Male">Male
<input type="radio" name="sex" value="Female">Female<br>
<div id="gender" class="fullname" style="padding:0 0 0 15px;"></div>
Date Of Birth:<br>
Month:
<select name="month">
<option value="0">--Select Month--</option>
<option value="1">Janaury</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
 
Day:
<select name="day">
<option value='No'>--Select Day--</option>
<option value='Mo'>Monday</option>
<option value='tu'>Tuesday</option>
<option value='we'>Wednesday</option>
<option value='th'>Thursday</option>
<option value='fr'>Friday</option>
<option value='sa'>Saturday</option>
<option value='su'>Sunday</option>
</select>
 
Year:
<select name="year">
<script>
for(var i = 2017; i >= 1900; i--){
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>
<br>
<span id="month_div" class="fullname" style="padding:0 0 0 60px;"></span>
<span id="day_div" class="fullname" style="padding:0 0 0 80px;"></span>
<span id="year_div" class="fullname" style="padding:0 0 0 65px;"></span><br>
<input type="submit" value="Submit">
</form>
<script>
var firstName = document.forms.myForm.fname;
var lastName = document.forms.myForm.lname;
var gender = document.forms.myForm.sex;
var months = document.forms.myForm.month;
var days = document.forms.myForm.day;
var years = document.forms.myForm.year;
var fname_error = document.getElementById("errorFName");
var lname_error = document.getElementById("errorLName");
var gender_error = document.getElementById("gender");
var month_error = document.getElementById("month_div");
var day_error = document.getElementById("day_div");
var year_error = document.getElementById("year_div");
function validateName() {
var validity = true;
validity &= validateFName();
validity &= validateLName();
validity &= validateGender();
validity &= validateMonth();
validity &= validateDay();
validity &= validateYear();
return validity;
}
function validateFName() {
if (firstName.value === "enter name here") {
firstName.value = "";
firstName.style.border = "1px solid red";
fname_error.textContent = "Fill User Name";
return false;
}
if (firstName.value !== "enter name here") {
// fname_error.innerHTML = "";
return true;
}
}
function validateLName() {
if (lastName.value === "enter name here") {
lastName.value = "";
lastName.style.border = "1px solid red";
lname_error.textContent = "Fill User Name";
return false;
}
}
function validateGender() {
if (gender[0].checked || gender[1].checked) {
gender_error.innerHTML = "";
return true;
} else {
gender_error.textContent = "select your sex";
return false;
}
}
function validateMonth() {
if (months.value !== "0") {
month_error.innerHTML = "";
day_error.style.padding = "0 0 0 175px";
return true;
} else {
month_error.textContent = "select the month";
return false;
}
}
function validateDay() {
if (days.value !== "No") {
day_error.innerHTML = "";
year_error.style.padding = "0 0 0 150px";
return true;
} else {
day_error.textContent = "select the day";
//day_error.style.padding = "0 0 0 80px";
return false;
}
}
function validateYear() {
if (years.value !== "2017") {
year_error.innerHTML = "";
return true;
} else {
year_error.textContent = "select the year";
return false;
}
}
</script>
</body>
</html>
edit: just tried to debug it this way and it seems that the code just passed through even if the return value is true.
the out put is always "it doesnt work"
function validateName() {
var validity = true;
validity &= validateFName();
if (validity === true)
alert("it works FName");
validity &= validateLName();
if (validity === true)
alert("it works LName");
validity &= validateGender();
if (validity === true)
alert("it works Gender");
validity &= validateMonth();
if (validity === true)
alert("it works Month");
validity &= validateDay();
if (validity === true)
alert("it works Day");
validity &= validateYear();
alert("it works Year");
if (validity === true)
return validity;
else
alert("it dosnt works");
}
edit 2. now my problem is with submit. it submits the form without validating any input. it should say "please fill the fields" but it just goes to the php file.
check this code , hope it will work, i update your some code and use placeholder so no need to use check using text and update &= to = and related some code , hope it will work now
<html>
<head><title>Form</title>
<style>
h1, h2 {
color: red;
text-align: center;
}
#form {
padding-left: 80px;
}
.fullname {
/ / border: 1 px solid;
padding: 0 0 0 80px;
margin: 0;
color: red;
font-style: italic;
font-size: 13px;
white-space: nowrap;
/ / float: left;
/ / visibility: hidden;
}
.N {
/ / border-color: red;
border-radius: 5px;
/ / text-shadow: 0 0 2 px #ddd;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<!--onSubmit="return !!(validateFName() & validateLName() & validateGender() & validateMonth() & validateDay() & validateYear());" -->
<form id="form" name="myForm" action="" method="post" onSubmit="return validateName()">
First Name:<input class="N" type="text" name="fname" value="" placeholder="enter namehere"/><br>
<div id="errorFName" class="fullname"></div>
Last Name:<input class="N" type="text" name="lname" value="" placeholder="enter name here"/><br>
<div id="errorLName" class="fullname"></div>
Gender:<br>
<input type="radio" name="sex" value="Male">Male
<input type="radio" name="sex" value="Female">Female<br>
<div id="gender" class="fullname" style="padding:0 0 0 15px;"></div>
Date Of Birth:<br>
Month:
<select name="month">
<option value="0">--Select Month--</option>
<option value="1">Janaury</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select> 
Day:
<select name="day">
<option value='No'>--Select Day--</option>
<option value='Mo'>Monday</option>
<option value='tu'>Tuesday</option>
<option value='we'>Wednesday</option>
<option value='th'>Thursday</option>
<option value='fr'>Friday</option>
<option value='sa'>Saturday</option>
<option value='su'>Sunday</option>
</select> 
Year:
<select name="year">
<script>
for (var i = 2017; i >= 1900; i--) {
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select><br>
<span id="month_div" class="fullname" style="padding:0 0 0 60px;"></span>
<span id="day_div" class="fullname" style="padding:0 0 0 80px;"></span>
<span id="year_div" class="fullname" style="padding:0 0 0 65px;"></span><br>
<input type="submit" value="Submit">
</form>
<script>
var firstName = document.forms.myForm.fname;
var lastName = document.forms.myForm.lname;
var gender = document.forms.myForm.sex;
var months = document.forms.myForm.month;
var days = document.forms.myForm.day;
var years = document.forms.myForm.year;
var fname_error = document.getElementById("errorFName");
var lname_error = document.getElementById("errorLName");
var gender_error = document.getElementById("gender");
var month_error = document.getElementById("month_div");
var day_error = document.getElementById("day_div");
var year_error = document.getElementById("year_div");
function validateName() {
validity = true;
validity = validateFName();
validity = validateLName();
validity = validateGender();
validity = validateMonth();
validity = validateDay();
validity = validateYear();
// return validity;
if(validateFName() && validateLName() && validateGender() && validateMonth() && validateYear()){
document.getElementById("form").action = "http://localhost/new1.php";
// change this url which your action
document.getElementById("form").submit();
} else {
return false;
}
}
function validateFName() {
if (firstName.value == "") {
firstName.value = "";
firstName.style.border = "1px solid red";
fname_error.textContent = "Fill User Name";
return false;
} else {
fname_error.textContent = "";
firstName.style.border = "1px solid #fff";
return true;
}
}
function validateLName() {
if (lastName.value == "") {
lastName.value = "";
lastName.style.border = "1px solid red";
lname_error.textContent = "Fill User Name";
return false;
} else {
lname_error.textContent = "";
lastName.style.border = "1px solid #fff";
return true;
}
}
function validateGender() {
if (gender[0].checked || gender[1].checked) {
gender_error.innerHTML = "";
return true;
}
else {
gender_error.textContent = "select your sex";
return false;
}
}
function validateMonth() {
if (months.value !== "0") {
month_error.innerHTML = "";
day_error.style.padding = "0 0 0 175px";
return true;
}
else {
month_error.textContent = "select the month";
return false;
}
}
function validateDay() {
if (days.value !== "No") {
day_error.innerHTML = "";
year_error.style.padding = "0 0 0 150px";
return true;
}
else {
day_error.textContent = "select the day";
//day_error.style.padding = "0 0 0 80px";
return false;
}
}
function validateYear() {
if (years.value !== "2017") {
year_error.innerHTML = "";
return true;
}
else {
year_error.textContent = "select the year";
return false;
}
}
</script>
</body>
</html>
Use
var firstName = document.forms.myForm.fname.value;
You have forgot to add value after field name.

registration form validation using javascript

Im partly there but it would be helpful if any of you guys could send the entire code .
1) Create a form with the below given fields and validate the same using javascript or jquery.
Name : Text box- mandatory
Gender : Radio Button
Age : Text box - Accept Number only - (check for valid Age criteria)
Email : Text box -  should be in format example#gmail.com
Website : Text box -  should be in format http://www.example.com
Country : Select box with 10 countries
Mobile :  Text box - should be a 10 digit number - Display this field only after the user selects a country
Social Media Accounts : Facebook, Google, Twitter (3 checkboxes) - Display Social media section only if selected Country is India
I agree the Terms and Conditions - Checkbox
All fields are mandatory and show error messages for all fields(if not valid)
Only allow to submit form after checking the 'I agree' checkbox.
<!DOCTYPE html>
<html>
<head>
<title>Get Values Of Form Elements Using jQuery</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="form_value.css"/>
<!-- Include JS File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="form_value.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#social").hide() ;
// $("#hide").click(function(){
// $("social").hide();
// });
// var country = document.getElementByName("country")[0].value;
// if (country.value == "India") {
// $("#show").click(function(){
//     $("social").show();
// });
// }
if (!(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.email_id.value)) {
alert("You have entered an invalid email address!")
return (false)
}
});
</script>
</head>
<body onload="disableSubmit()">
<div class="container">
<div class="main">
<h2>Get Values Of Form Elements Using jQuery</h2>
<form action="">
<!-- Text -->
<br>
<br>
<label>Name :</label>
<input type="text" id="text" name="name" value=""required/><br>
<!-- Radio Button -->
<br><br><br>
<label>Gender:</label>
<input type="radio" name="male" value="Male">Male
<input type="radio" name="female" value="Female">Female
<br><br>
<!-- Textarea -->
<label>Email :</label>
<input type="text" id="Email" value="" id="Email"/>
<br>
<br><br>
Age: <input type="text" id="Age" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" />
<span id="error" style="color: Red; display: none">* Input digits (0 - 9)</span>
<br><br>
<label> Website:</label>
<input type="text" id="text" value="" name = "Website" id="website" />
<script type="text/javascript">
function validate() {
if(Website.value.length==0)
{
document.getElementById("Website").innerHTML="Should be in the format http://www.example.com ";
}
}
</script>
<br><br>
<label>Country:</label>
<select class="country" id = "country">
<option>Select</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
<option value="uae">United Arab Emirates</option>
<option value="germany">Germany</option>
<option value="france">France</option>
<option value="netherlands">Netherlands</option>
<option value="yemen">Yemen</option>
<option value="pakistan">Pakistan</option>
<option value="russia">Russia</option>
</select>
<br><br>
<label>Mobile:</label>
<input type="text" id="phone" name="phone" onkeypress="phoneno()" maxlength="10">
<script type="text/javascript">
function phoneno(){
$('#phone').keypress(function(e) {
var a = [];
var k = e.which;
for (i = 48; i < 58; i++)
a.push(i);
if (!(a.indexOf(k)>=0))
e.preventDefault();
});
}
</script>
<br><br>
<div id = "social" >
<p>Social Media Accounts.</p> <input type="checkbox" id="Facebook" value="Facebook"><label for="Facebook"> Facebook</label><br> <input type="checkbox" id="Google" value="Google"><label for="Google"> CSS</label><br> <input type="checkbox" id="Twitter" value="Twitter"><label for="Twitter"> Twitter</label><br>
</div>
<br>
<br>
<script>
function disableSubmit() {
document.getElementById("submit").disabled = true;
}
function activateButton(element) {
if(element.checked) {
document.getElementById("submit").disabled = false;
}
else {
document.getElementById("submit").disabled = true;
}
}
</script>
<input type="checkbox" name="terms" id="terms" onchange="activateButton(this)"> I Agree Terms & Coditions
<br><br>
<input type="submit" name="submit" id="submit">
</script>
</form>
</div>
</body>
</html>
this is my js page content form_value.js
$(document).ready(function() {
// Function to get input value.
$('#text_value').click(function() {
var text_value = $("#text").val();
if(text_value=='') {
alert("Enter Some Text In Input Field");
}else{
alert(text_value);
}
});
// Funtion to get checked radio's value.
$('#gender_value').click(function() {
$('#result').empty();
var value = $("form input[type='gender']:checked").val();
if($("form input[type='gender']").is(':checked')) {
$('#result').append("Checked Radio Button Value is :<span> "+ value +" </span>");
}else{
alert(" Please Select any Option ");
}
});
// Get value Onchange radio function.
$('input:gender').change(function(){
var value = $("form input[type='gender']:checked").val();
alert("Value of Changed Radio is : " +value);
});
// Funtion to reset or clear selection.
$('#radio_reset').click(function() {
$('#result').empty();
$("input:radio").attr("checked", false);
});
$('#Email').click(function() {
function validate(Email) {
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za- z]{2,4})$/;
//var address = document.getElementById[email].value;
if (reg.test(email) == false)
{
alert('Should be in the format example#gmail.com');
return (false);
}
}
});
});
$("#Age").click(function() {
var specialKeys = new Array();
specialKeys.push(8); //Backspace
function IsNumeric(e) {
var keyCode = e.which ? e.which : e.keyCode
var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);
document.getElementById("error").style.display = ret ? "none" : "inline";
return ret;
}
function handleChange(input) {
if (input.value < 0) input.value = 0;
if (input.value > 100) input.value = 100;
}
});
</script>
<!DOCTYPE html> <html> <head> <script> function validateForm() {
var name = document.forms["myForm"]["fname"].value;
var gender = document.forms["myForm"]["gender"].value;
var age = document.forms["myForm"]["age"].value;
var a = parseInt(age);
var email = document.forms["myForm"]["email"].value;
var url = document.forms["myForm"]["website"].value;
var country = document.forms["myForm"]["country"].value;
var mobileCountry = document.forms["myForm"]["mobileCountry"].value;
var mcLength = mobileCountry.length;
if (name == "") {
alert("Name Field is mandatory");
return false;
}
if (gender != "male" && gender != "female") {
alert("Atleast one Gender has to be chosen");
return false;
}
if(isNaN(a)){
alert("Age is compulsory and must be a number");
return false;
}
if(email == ""){
alert("Email address is required");
}
else if(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)){
} else{
alert("Email address entered is invalid");
return false;
}
if(/^(ftp|http|https):\/\/[^ "]+$/.test(url)){
} else{
alert("Website url entered is invalid");
return false;
}
if(country != "choose"){
document.getElementById("mc").style.display = "block";
} else{
document.getElementById("mc").style.display = "none";
}
if(mcLength != 10){
alert("Number must be ten digits");
return false;
}
} function displaySocial(){ var social =
document.getElementById("social");
var mc = document.getElementById("mobileCountry");
var country = document.getElementById("country");
var selectedValue = country.options[country.selectedIndex].value;
if (selectedValue != "choose") {
if(selectedValue == "india"){
if(social.style.display = "none"){
social.style.display = "block";
} else{
social.style.display = "none";
} } else{
social.style.display = "none"; }
if(mc.style.display = "none"){
mc.style.display = "block";
} else{
mc.style.display = "none"; } } else{
mc.style.display = "none"; }
} </script> </head> <body> <form name="myForm" action="/action_page_post.php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"><br> Gender: <input type="radio" name="gender" value="male"> Male <input type="radio" value="female" name="gender"> Female <br> age: <input type="text" name="age"><br> email: <input type="text" name="email"><br> website: <input type="text" name="website"><br> country: <select type="text" name="country" id="country" onclick="displaySocial()"><option value="choose">--choose--</option><option value="usa">USA</option><option value="uk">UK</option><option value="ng">Nigeria</option><option value="india">India</option></select><br> <span id="mobileCountry" style="display: none;">mobile country: <input type="text" name="mobileCountry"><br></span> <span id="social" style="display: none;">Social Media: <input type="radio" name="gender"> Facebook <input type="radio" name="gender"> Google <input type="radio" name="gender"> Twitter</span> <br> <p> <input type="submit" value="Submit"> </form> <p id="error"></p> </body> </html>

Javascript form validation program not working

document.bgColor="#FFFFCC";
var myForm = document.getElementById("form"); //declare variables and page styling
var Div1 = document.getElementById("div1");
var Div2 = document.getElementById("div2");
myForm.style.color="blue";
myForm.style.fontSize="20px";
myForm.style.fontWeight="400";
myForm.style.fontFamily="arial";
function validateForm() //form validation
{
var firstname = document.getElementById("firstname"); //declared variables
var lastname = document.getElementById("lastname");
var postcode = document.getElementById("postcode");
var email = document.getElementById("email");
var cardtype = document.getElementById("cardtype");
var cardnumber = document.getElementById("cardnumber");
var ccv = document.getElementById("ccv");
var month = document.getElementById("month");
var year = document.getElementById("year");
if (firstname.value==""){ //validate first name
alert("Your first name can not be left blank");
firstname.focus();
return false;
}
if (lastname.value==""){ //validate last name
alert("Your last name can not be left blank");
lastname.focus();
return false;
}
if (postcode.value.length!=4 || (isNaN(document.getElementById("postcode").value))){ //vaildate post code
alert("Please enter a valid post code");
postcode.focus();
return false;
}
if (email.value.length<5 || email.value.indexOf("#")== -1){ //validate email
alert("Please enter a valid email");
email.focus();
return false;
}
if (email.value.indexOf(".")== -1){
alert("Please enter a valid email");
email.focus();
return false;
}
if (cardnumber.length!=16 || (isNaN(document.getElementById("cardnumber").value))){ //validate card number length
alert("Please enter a valid card number");
cardnumber.focus();
return false;
}
if (ccv.length<3 || (isNaN(document.getElementById("ccv").value))){ //validate ccv number length
alert("Please enter a valid ccv");
ccv.focus();
return false;
}
}
function checkDate(){ //check expiry date of card
var date = new Date();
var month = date.getMonth()+1; //get current month
var year = date.getYear()+1; //get current year
var expiryMonth = document.getElementById("month").value;
var expiryYear = document.getElementById("year").value;
if (month == expiryMonth)//check if the current month has not expired
{
alert("Your card has expired");
month.focus();
return false;
}
if (year == expiryYear) //check if the current year has not expired
{
alert("Your card has expired");
year.focus();
return false;
}
return false;//so the data is not cleared
}
alert("Your order has been successfully submitted thank you"); //notify user of correct submission
return true;
//open up help window
function Popup(){
window.open( "file:///C:/Users/Andy2411/Desktop/4JSB/assignment/html/help.html", "myWindow",
"status = 1, height = 500, width = 500, resizable = 0" );
return;
}
form{width:700px;margin:0 auto;}
#Div1{float:;width:300;height:300;border:2px solid;border-radius:10px;padding:10px;padding-bottom:20px;background-color:;box-shadow:0 0 10px #2DADAC;position: relative; top: -10%; transform: translateY(10%);}
#Div2{float:;width:300;height:300;border:2px solid;border-radius:10px;padding:10px;background-color:;box-shadow:0 0 10px #2DADAC;position: relative; top: -10%; transform: translateY(10%);}
#Div3{text-align:center;margin:0 auto;display:;position: relative; top: -180%; transform: translateY(180%);}
<!DOCTYPE html>
<html>
<!--Pseudocode
INPUT firstname, lastname, postcode, email, cardtype, cardnumber, ccv, expiryMonth, expiryYear
onsubmit = DO validateForm()
END
MODULE validateForm()
IF (firstname =="") THEN
OUTPUT error in firstname
RETURN false
ENDIF
IF (lastname =="") THEN
OUTPUT error in lastname
RETURN false
ENDIF
IF (postcode.length<4 || (isNaN(document.getElementById("postcode").value))) THEN
OUTPUT error in postcode
RETURN false
ENDIF
IF (email.value.length<5 || email.value.indexOf("#", ".")== -1) THEN
OUTPUT error in email
RETURN false
ENDIF
IF (cardnumber.length!=16 || (isNaN(document.getElementById("cardnumber").value))) THEN
OUTPUT error in cardnumber
RETURN false
ENDIF
IF (ccv.length !=3 || (isNaN(document.getElementById("ccv").value))) THEN
OUTPUT error in ccv
RETURN false
ENDIF
IF (month == expiryMonth) THEN
OUTPUT error in month
RETURN false
ENDIF
IF (year == expiryYear) THEN
OUTPUT error in year
RETURN false
ENDIF
OUTPUT correct
RETURN true
END validateForm()-->
<head>
<title>Assignment4JSB</title>
<link rel="stylesheet" type="text/css" href="../css2/assignment.css" />
</head>
<body>
<form name=”userForm” autocomplete="on" id="form" onsubmit="return validateForm()" onsubmit="return checkDate()">
<script src="../js2/assignment.js"></script>
<div id="Div1">
<h2>Order Form</h2>
<fieldset>
<legend>Enter your Details here</legend></br>
<table>
<tr>
<td><label for="firstname">First Name</label></td>
<td><input type="text" name="First_Name" id="firstname" size="30" required="required" autofocus /></td>
</tr>
<tr>
<td><label for="Last_Name">Last Name</label></td>
<td><input type="text" name="Last_Name" id="lastname" size="30" required="required" /></td>
</tr>
<tr>
<td><label for="postcode">Postcode</label></td>
<td><input type="text" name="postcode" id="postcode" size="4" required="required" /></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email" id="email" size="30"/></td>
</tr>
</table>
</fieldset>
<h2>Payment Details</h2>
<fieldset>
<legend>Please enter your payment details</legend><br/>
Credit Card <select id="cardtype" required="required">
<option value=""></option>
<option value="Mastercard">Mastercard</option>
<option value="Visa">Visa</option>
<option value="AmericanExpress">American Express</option>
</select>
<br/><br/>
Card number <input type="text" id="cardnumber" size="16" required="required"/>
<br/></br>
CCV <input type="text" size="3" required="required"/>
<br/></br>
Expiry MM/YY <select id="month" required="required">
<option value=""></option>
<option value="month">01</option>
<option value="month">02</option>
<option value="month">03</option>
<option value="month">04</option>
<option value="month">05</option>
<option value="month">06</option>
<option value="month">07</option>
<option value="month">08</option>
<option value="month">09</option>
<option value="month">10</option>
<option value="month">11</option>
<option value="month">12</option>
</select>
<select required="required" id="year">
<option value=""></option>
<option value="year">2016</option>
<option value="year">2017</option>
<option value="year">2018</option>
<option value="year">2019</option>
<option value="year">2020</option>
<option value="year">2021</option>
<option value="year">2022</option>
<option value="year">2023</option>
<option value="year">2024</option>
<option value="year">2025</option>
<option value="year">2026</option>
</select>
</fieldset>
</div>
<br/>
<div id="Div3">
<button type="submit">Submit</button>
<button type="button" onClick="Popup()">Help</button><br/>
</div>
</form>
</body>
</html>
This is an assignment for javascript basic where I have to write a form and validate user input from text boxes and drop down boxes including a date check for the credit card, I have written the code but having difficulty and can't see where I am going wrong, any help would be appreciated.
You've lots off mistakes :
You can use onsubmit attribute on time in element
Return statement always under a function
document.bgColor="#FFFFCC";
var myForm = document.getElementById("form"); //declare variables and page styling
var Div1 = document.getElementById("div1");
var Div2 = document.getElementById("div2");
myForm.style.color="blue";
myForm.style.fontSize="20px";
myForm.style.fontWeight="400";
myForm.style.fontFamily="arial";
function validateForm() //form validation
{
debugger;
var firstname = document.getElementById("firstname"); //declared variables
var lastname = document.getElementById("lastname");
var postcode = document.getElementById("postcode");
var email = document.getElementById("email");
var cardtype = document.getElementById("cardtype");
var cardnumber = document.getElementById("cardnumber");
var ccv = document.getElementById("ccv");
var month = document.getElementById("month");
var year = document.getElementById("year");
if (firstname.value==""){ //validate first name
alert("Your first name can not be left blank");
firstname.focus();
return false;
}
if (lastname.value==""){ //validate last name
alert("Your last name can not be left blank");
lastname.focus();
return false;
}
if (postcode.value.length!=4 || (isNaN(document.getElementById("postcode").value))){ //vaildate post code
alert("Please enter a valid post code");
postcode.focus();
return false;
}
if (email.value.length<5 || email.value.indexOf("#")== -1){ //validate email
alert("Please enter a valid email");
email.focus();
return false;
}
if (email.value.indexOf(".")== -1){
alert("Please enter a valid email");
email.focus();
return false;
}
if (cardnumber.length!=16 || (isNaN(document.getElementById("cardnumber").value))){ //validate card number length
alert("Please enter a valid card number");
cardnumber.focus();
return false;
}
if (ccv.length<3 || (isNaN(document.getElementById("ccv").value))){ //validate ccv number length
alert("Please enter a valid ccv");
ccv.focus();
return false;
}
}
function checkDate(){ //check expiry date of card
var date = new Date();
var month = date.getMonth()+1; //get current month
var year = date.getYear()+1; //get current year
var expiryMonth = document.getElementById("month").value;
var expiryYear = document.getElementById("year").value;
if (month == expiryMonth)//check if the current month has not expired
{
alert("Your card has expired");
month.focus();
return false;
}
if (year == expiryYear) //check if the current year has not expired
{
alert("Your card has expired");
year.focus();
return false;
}
return false;//so the data is not cleared
}
//open up help window
function Popup(){
window.open( "file:///C:/Users/Andy2411/Desktop/4JSB/assignment/html/help.html", "myWindow",
"status = 1, height = 500, width = 500, resizable = 0" );
return;
}
form{width:700px;margin:0 auto;}
#Div1{float:;width:300;height:300;border:2px solid;border-radius:10px;padding:10px;padding-bottom:20px;background-color:;box-shadow:0 0 10px #2DADAC;position: relative; top: -10%; transform: translateY(10%);}
#Div2{float:;width:300;height:300;border:2px solid;border-radius:10px;padding:10px;background-color:;box-shadow:0 0 10px #2DADAC;position: relative; top: -10%; transform: translateY(10%);}
#Div3{text-align:center;margin:0 auto;display:;position: relative; top: -180%; transform: translateY(180%);}
<form name=”userForm” autocomplete="on" id="form" onsubmit="return validateForm();checkDate();">
<script src="../js2/assignment.js"></script>
<div id="Div1">
<h2>Order Form</h2>
<fieldset>
<legend>Enter your Details here</legend></br>
<table>
<tr>
<td><label for="firstname">First Name</label></td>
<td><input type="text" name="First_Name" id="firstname" size="30" autofocus /></td>
</tr>
<tr>
<td><label for="Last_Name">Last Name</label></td>
<td><input type="text" name="Last_Name" id="lastname" size="30" /></td>
</tr>
<tr>
<td><label for="postcode">Postcode</label></td>
<td><input type="text" name="postcode" id="postcode" size="4" /></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email" id="email" size="30"/></td>
</tr>
</table>
</fieldset>
<h2>Payment Details</h2>
<fieldset>
<legend>Please enter your payment details</legend><br/>
Credit Card <select id="cardtype" >
<option value=""></option>
<option value="Mastercard">Mastercard</option>
<option value="Visa">Visa</option>
<option value="AmericanExpress">American Express</option>
</select>
<br/><br/>
Card number <input type="text" id="cardnumber" size="16" />
<br/></br>
CCV <input type="text" size="3" />
<br/></br>
Expiry MM/YY <select id="month" >
<option value=""></option>
<option value="month">01</option>
<option value="month">02</option>
<option value="month">03</option>
<option value="month">04</option>
<option value="month">05</option>
<option value="month">06</option>
<option value="month">07</option>
<option value="month">08</option>
<option value="month">09</option>
<option value="month">10</option>
<option value="month">11</option>
<option value="month">12</option>
</select>
<select id="year">
<option value=""></option>
<option value="year">2016</option>
<option value="year">2017</option>
<option value="year">2018</option>
<option value="year">2019</option>
<option value="year">2020</option>
<option value="year">2021</option>
<option value="year">2022</option>
<option value="year">2023</option>
<option value="year">2024</option>
<option value="year">2025</option>
<option value="year">2026</option>
</select>
</fieldset>
</div>
<br/>
<div id="Div3">
<button type="submit">Submit</button>
<button type="button" onClick="Popup()">Help</button><br/>
</div>
</form>

Categories