So I'm trying to get this form to work properly and it doesn't seem to want to do anything at all. The point of the form is to create a span element with the class of error and a value of "*" if the form is wrong, which doesn't really need to check anything just yet so I think the code for that is alright. But the rest of it is supposed to validate that all inputs are filled in before allowing it to submit, make sure that the nights input is numeric, and then check that the email input matches the emailPattern variable. But it doesn't do anything. If I enter "eeee" in the Nights input box, it just continues submitting the form anyway. What am I doing wrong? Note: This JavaScript is the only one that needs to be edited. I know there's two others included in the HTML, but the only one that needs to be edited is the JavaScript portion here as that's all I need to edit.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reservation request</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="additional-methods.min.js"></script>
<script src="reservation.js"></script>
</head>
<body>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date" autofocus><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights"><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" class="left" checked>Standard
<input type="radio" name="room" id="business" class="left">Business
<input type="radio" name="room" id="suite" class="left last">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" class="left" checked>King
<input type="radio" name="bed" id="double" class="left last">Double Double<br>
<input type="checkbox" name="smoking" id="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name"><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email"><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone" placeholder="999-999-9999"><br>
</fieldset>
<input type="submit" id="submit" value="Submit Request"><br>
</form>
</body>
</html>
JavaScript & JQuery
New that still doesn't work but is better organized and more prepared thanks to Richard
$(document).ready(function() {
var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
$("input").add("span").addClass("error").value("*"); // adding span with class of error and value of *
$("#arrival_date").focus;
$("#submit").click(function(e) { // variable to filter for empty inputs
var empty = $(this).parent().find("input").filter(function() {
return $(this).val() === "";
});
if (empty.length ||
$.isNumeric($("#nights").val()) ||
$("#email").value != emailPattern) {
e.preventDefault();
}
function storeValues(form) { //function to store cookie values from input boxes
setCookie("arrival_date", form.arrival_date.value);
setCookie("nights", form.nights.value);
setCookie("name", form.name.value);
setCookie("email", form.email.value);
setCookie("phone", form.phone.value);
return true;
}
}
}); // end ready
Previously was this
$(document).ready(function() {
var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;
$("input").add("span").addClass("error").value("*"); // adding span with class of error and value of *
$("#arrival_date").focus;
$("#submit").click(function() { // variable to filter for empty inputs
var empty = $(this).parent().find("input").filter(function() {
return this.value === "";
});
if ( ($("input").val()) == (empty)) {
$("form").submit(function (e) { // function to stop submitting form if any values return empty
e.preventDefault();
});
}
if {
$.isNumeric($("#nights").val())) { // function to check id nights for being numeric and stopping form if not
$("form").submit(function (e) {
e.preventDefault();
}
}
}
if $("#email").value != emailPattern { // function to stop form if id email does not match variable emailPattern
$("form").submit(function (e) {
e.preventDefault();
}
}
$("#submit").click(function() {
function storeValues(form) { //function to store cookie values from input boxes
setCookie("arrival_date", form.arrival_date.value);
setCookie("nights", form.nights.value);
setCookie("name", form.name.value);
setCookie("email", form.email.value);
setCookie("phone", form.phone.value);
return true;
}
});
}); // end ready
