Develop Reference

Set a field to required in html when an option is selected

Hi I am trying to make a field required when option is selected like if option 1 is selected so field one will be required and if option 2 then field 2 and make field 1 not required so on. So far I have tried setAttribute, removeAttribute, getelemenybyid(..).required=true or false (proper camel cases are used in code). nothing seem to work.to better explain I have entered the code below. I am using this form as Camunda embedded form and scripts are java scripts. smaple below
<div class="form-group" >
<label for="AmendmentType" >Amendment Type: </label>
<select class="form-control" onchange="Optionselection(this);" cam-variable-name="AmendmentType" cam-variable-type="String" id = "AmendmentType" required>
<option onClick="Optionselection()" id="update" name="AmendmentType" value="Update a field">Update a field</option>
<option onClick="Optionselection()" id="DuplicateId" name="AmendmentType" value="Duplicate Tax Files (to be mande inactive)">Duplicate Tax Files (to be made inactive)</option>
</select>
</div>
function Optionselection(that) {
if (that.value == "Update a field") {
document.getElementById('ValueinSystem').required=true;
document.getElementById('duplicateID').required=false;
}
else if(that.value == "Duplicate Tax Files (to be mande inactive)") {
document.getElementById('ValueinSystem').required=flase;
document.getElementById('duplicateID').required=true;
}
as i said i tried the following nothing seems to work
function Optionselection(that) {
if (that.value == "Update a field") {
document.getElementById('ValueinSystem').setAttribute('required','');
document.getElementById('duplicateID').removeAttribute('required');
}
else if(that.value == "Duplicate Tax Files (to be mande inactive)") {
document.getElementById('duplicateID').setAttribute('required','');
document.getElementById('ValueinSystem').removeAttribute('required');
}

Selects and makes the respective input field required, to distinguish added some style
More on client side validation here .......
const carsNode = document.querySelector("#cars");
const merc = document.querySelector("#merc");
const audi = document.querySelector("#audi");
const form = document.querySelector("form");
const mercError = document.querySelector('#merc + span.error');
const audiError = document.querySelector('#audi + span.error');
const carError = document.querySelector('#cars + span.error');
let selectedCar;
cars.addEventListener('change', (e) => {
// we listen to change event for select
selectedCar = e.target.value;
switch (selectedCar) {
case "mercedes":
merc.required = true;
audi.required = false;
break;
case "audi":
merc.required = false;
audi.required = true;
break;
default:
merc.required = false;
audi.required = false;
break;
}
})
form.addEventListener('submit', function(event) {
// if the field's is valid, we let the form submit
if ((!merc.validity.valid && selectedCar === "mercedes") || (!audi.validity.valid && selectedCar === "audi") || !selectedCar) {
// If it isn't, we display an appropriate error message
showError();
// Then we prevent the form from being sent by canceling the event
event.preventDefault();
}
});
function showError() {
if (merc.validity.valueMissing && selectedCar === "mercedes") {
// If the field is empty,
// display the following error message.
mercError.textContent = 'You need to enter a Mercedes value';
carError.textContent = '';
audiError.textContent = '';
// Set the styling appropriately
mercError.className = 'error active';
audiError.classList.remove('error', 'active');
carError.classList.remove('error', 'active');
} else if (audi.validity.valueMissing && selectedCar === "audi") {
audiError.textContent = 'You need to enter an Audi value';
mercError.textContent = '';
carError.textContent = '';
// Set the styling appropriately
audiError.className = 'error active';
mercError.classList.remove('error', 'active');
carError.classList.remove('error', 'active');
} else {
mercError.classList.remove('error', 'active');
audiError.classList.remove('error', 'active');
carError.textContent = 'You need to select a car';
mercError.textContent = '';
audiError.textContent = '';
carError.className = 'error active';
}
}
input:required {
border: 1px dashed red;
}
body {
font: 1em sans-serif;
width: 200px;
padding: 0;
margin: 10px auto;
}
p * {
display: block;
}
/* This is our style for the invalid fields */
input:invalid {
border-color: #900;
background-color: #FDD;
}
input:focus:invalid {
outline: none;
}
/* This is the style of our error messages */
.error {
width: 100%;
padding: 0;
font-size: 80%;
color: white;
background-color: #900;
border-radius: 0 0 5px 5px;
box-sizing: border-box;
}
.error.active {
padding: 0.3em;
margin-top: 5px;
}
input {
-webkit-appearance: none;
appearance: none;
width: 100%;
border: 1px solid #333;
margin: 0;
font-family: inherit;
font-size: 90%;
box-sizing: border-box;
}
<div>
<form novalidate>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="" selected>Select Car</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<span class="error" aria-live="polite"></span>
<br>
<br>
<label for="merc">Mercedes:</label>
<input type="text" id="merc" name="merc">
<span class="error" aria-live="polite"></span>
<br><br>
<label for="audi">Audi:</label>
<input type="text" id="audi" name="audi">
<span class="error" aria-live="polite"></span>
<br><br>
<button>Submit</button>
</form>
</div>

How can I make it so a different result occurs depending on an input?

I have the following code, and I was wondering instead of making it so that if any variable inside the array is entered it will bring you to index.php, I want it so if the first is entered it will bring you to 1.html, if 2 is entered it will bring you to 2.html etc.
I
s this possible?
The HTML code:
<center>
<form
name="myForm"
onsubmit="return validateForm()"
method="post"
>
<h1 style = "color:white;">Enter code </h1>
<input type="text" name="value" style="padding: 5px; border-radius: 6px; border: 0px solid transparent;"/>
<br><br>
<input type="submit" class = "ex" value="Enter/submit" style="border-radius: 6px; font-size: 18px;display: inline-block; padding: 20px; border: none; background-color: royalblue; color: white;"/>
</form>
</center>
The JavaScript code:
var cars = ["Saab", "Volvo", "BMW"];
function validateForm() {
var x = document.forms["myForm"]["value"].value;
if (cars.indexOf(x) == -1) {
alert("no car entered");
return false;
}
var x = document.forms["myForm"]["value"].value;
if (cars.indexOf(x) != -1) {
window.location.href = "index.php";
return false;
}
}

Something like this?
Just replace the console.log with the redirect you want.
const cars = ["Saab", "Volvo", "BMW"]
function validateForm() {
const inputValue = document.forms["myForm"]["value"].value;
if (inputValue === cars[0]) {
console.log("Redirect to 1.html");
} else if (inputValue === cars[1]) {
console.log("Redirect to 2.html");
} else if (inputValue === cars[2]) {
console.log("Redirect to 3.html");
} else {
console.log("no car entered")
}
return false;
}
<form name="myForm" onsubmit="return validateForm()" method="post">
Enter code
<input id="formInput" type="text" name="value" /><br>
<input type="submit" class="ex" value="Enter/submit" />
</form>

To redirect to a URL of the form 1.html, 2.html and so on we notice that the digit required is the index of the car make within the array. So thw place we want to redirect to is this index.html
Here is code which implements this.
<center>
<form name="myForm" onsubmit="return validateForm()" method="post">
<h1 style = "color:black;">Enter code </h1><input type="text" name="value" style="padding: 5px; border-radius: 6px; border: 1px solid red;"/>
<br><br><input type="submit" class = "ex" value="Enter/submit" style="border-radius: 6px; font-size: 18px;display: inline-block; padding: 20px; border: none; background-color: royalblue; color: white;"/>
</form>
</center>
<script>
var cars = ["Saab", "Volvo", "BMW"];
function validateForm() {alert(document.forms);alert(document.forms["myForm"]["value"].value);
var x = document.forms["myForm"]["value"].value;
if(cars.indexOf(x) == -1){
alert("no car entered");
return false;
}
else{
window.location.href = cars.indexOf(x) + ".html";
}
}
</script>
Notes:
center is deprecated - use CSS instead
the code in the question declared x twice
if...else is used above instead of testing the condition twice
there seems no point in the final return statement since the user is being redirected
the border of the input element was set to 0. For this test it has been put at 1px and color red so it can be seen

Validation with html form only gives if statement

No matter how many characters I enter, it only gives the if statement and not the else.
is there a typo I entered somewhere I am not seeing, or does the function not work if there are two inputs?
function valid_Function(){
var x, text;
x = document.getElementById("name").value;
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
}
else {
text = "Input OK";
}
document.getElementById("valid").innerHTML = text;
}
form input {
display: block;
margin-top: 10px;
}
form [type="submit"] {
padding: 5px;
border-radius: 5px;
border: none;
background: skyblue;
transition: .5s ease;
}
form [type="submit"]:hover {
box-shadow: 0 2px 5px 2px rgba(92, 228, 252, 0.8);
}
<form action="#">
<input for="fname" id="name" placeholder="First Name" type="text">
<input for="lname" id="name" placeholder="Last Name" type="text">
<input onclick="valid_Function()" type="submit" value="Submit">
</form>
<p id="valid"></p>

The couple issues noted in the comments are causing your code to break.
IDs in HTML need to be unique, so having 2 elements with id="name" will cause problems in JavaScript
Assuming you meant to check the length of first/last names rather than comparing the values to the integers 1 and 10, the code should be checking the .length property in your conditionals.
Assuming you want to run this check separately for each name input, here is the adjusted code to validate first and last name separately. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event for more information about handling form submission events.
document.getElementById('form').addEventListener('submit', function(event) {
event.preventDefault(); // this prevents the form from submitting right away so the rest of the validation can run
var firstName = document.getElementById("first_name").value.trim();
var lastName = document.getElementById("last_name").value.trim();
var text;
if (firstName.length < 1 || firstName.length > 10) {
text = "First name is not valid";
} else if (lastName.length < 1 || lastName.length > 10) {
text = "Last name is not valid";
} else {
text = "Input OK";
}
document.getElementById("valid").innerHTML = text;
return false; // this stops the form from continuing to submit, you may or may not want this line here
});
form input {
display: block;
margin-top: 10px;
}
form [type="submit"] {
padding: 5px;
border-radius: 5px;
border: none;
background: skyblue;
transition: .5s ease;
}
form [type="submit"]:hover {
box-shadow: 0 2px 5px 2px rgba(92, 228, 252, 0.8);
}
<form id="form">
<input for="fname" id="first_name" placeholder="First Name" type="text">
<input for="lname" id="last_name" placeholder="Last Name" type="text">
<input type="submit" value="Submit">
</form>
<p id="valid"></p>

Why not a simple truthy check?
if (!x) {
text = "Input not valid";
}
else {
text = "Input OK";
}
And, if you just want to make sure the length remains less than 10, then
if (!x || x.length> 10) {
text = "Input not valid";
}
else {
text = "Input OK";
}

No matter how many characters I enter, it only gives the if statement and not the else
Yes because isNaN will always return true if you give it a non number string and that's what is happening with you, if you try and input a number between 1 and 9 then your else will be executed.
Your validation works with number type inputs but since you want to validate a text input(name) then it can be done like this
your if statement
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
}
should be
if(x === "" || x.length > 10) {
text = "Input not valid";
}
because you need to check if the input is empty and if it is larger than 10 chars, besides I noticed you have two inputs with the same id!, the id is something unique it's not like classes, so pls change your HTML code

HTML Form Using JavaScript Valildation

I working on Javascript validation task as i am beginner in Javascript i was stuck in Js validation code codepen.Can, Anyone Please help out of this and point me in right direction.
Thanks in advance.
jQuery(document).ready(function($) {
function formValidation() {
var firstname = document.getElementById('product');
if (firstname.value.length == 0) {
document.getElementById('head').innerText = "* All fields are mandatory *";
firstname.focus();
return false;
}
if (inputAlphabet(firstname, "* For your name please use alphabets only *")) {
return true;
}
return false;
}
function textNumeric(inputtext, alertMsg) {
var numericExpression = /^[0-9]+$/;
if (inputtext.value.match(numericExpression)) {
return true;
}
else {
document.getElementByClass('price').innerText = alertMsg;
inputtext.focus();
return false;
}
}
function inputAlphabet(inputtext, alertMsg) {
var alphaExp = /^[a-zA-Z]+$/;
if (inputtext.value.match(alphaExp)) {
return true;
}
else {
document.getElementById('product').innerText = alertMsg;
inputtext.focus();
return false;
}
}
});
body {
background: #f5f5f5;
}
.product-container {
display: flex;
justify-content: center;
align-items: center;
padding: 100px;
}
input#product {
max-width: 200px;
padding: 5px 20px;
}
input.price {
max-width: 227px;
padding: 5px 4px;
width: 100%;
}
input.qnty {
max-width: 235px;
width: 100%;
padding: 5px 4px;
}
input[type="submit"] {
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: #000000;
padding: 5px 10px;
letter-spacing: 0.6px;
}
<!DOCTYPE html>
<html>
<head>
<title>Product Order</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="custom.js"></script>
</head>
<body>
<div class="product-container">
<form action="submit" method="POST">
Product Name: <input type="text" name="name" value="" required id="product" ><br><br>
Unit Price: <input type="number" name="Price" value= "" required class="price" pattern="\d+(\.\d{2})?"><br><br>
Quantity: <input type="number" name="Quantity" value="" min="1" max="10" required class="qnty price"><br><br>
<input type = "submit" name = "submit" value = "Get Total Amount">
</form>
</div>
</body>
</html>

You're doing the same thing I was doing when I started using jQuery... mixing JavaScript with jQuery.
You don't need to create a function to validate the form. I'd first change your submit button to this:
<button type="button" id="submitButton">Submit</button>
Then use jQuery to listen for the button click:
$('#submitButton').on('click', function() {
var product = $('#product').val();
var price = $('.price').val();
var name = $('#name').val();
// check if name input has a value, if blank, then display error message
if(name == "") {
alert('You must enter a name');
return false;
}
if(product == '//whatever you want to check here') {
// display message
}
if(price == '// check if the input is blank') {
// return error message
}
else {
// do something
}
});
The if/else inside your button click is your validation.

I see a ton of errors in your very small code. Your Jquery code looks very bad. You are creating functions but never using them, You don't have to create functions for form validation. You can use Jquery event listeners to check if the user has performed some action like (submit, Focus, Blur etc.,) and when you receive the event you have to perform an action and clearly innerText does not work on input boxes. Go through this article on form validation using Jquery.
You should do basic google search before posting a question here.

Why isn't my form submit button not going to a next page when I click on it?

I am trying to figure out why the form's "submit this form" button is not taking me to another HTML page I specified in the <form ... action="submit form.html" method="get"> attribute and not only that but when I put wrong first names, email addresses, and order numbers, and date of orders, it doesn't return JavaScript messages I specified in my if-else codes using JavaScript.
Here is the JavaScript code I use on the form.
var $ = function (id)
{
return document.getElementById(id);
}
var submitForm = function()
{
var FirstName= $("firstName").value;
var OrderNumber= $("orderNumber").value;
var DateOfOrder= $("date_of_order").value;
var emailAddress= $("email_address").value;
var isValid=true;
if(FirstName !== "Cherry", "Micheal", "Sandra", "Cookie")
{
$("firstname_error").firstChild.nodeValue=
"This person does not exist.";
isValid=false;
} else{ $("firstname_error").firstChild.nodeValue="";}
if(OrderNumber !== 3134, 4234, 9234, 3566)
{
$("orderNumber_error").firstChild.nodeValue="Invalid Order Number.";
isValid=false;
} else{ $("orderNumber_error").firstChild.nodeValue="";}
if(DateOfOrder !=='12-07-23', '15-04-24', '16-02-01', '14-01-12')
{
$("date_of_order_error").firstChild.nodeValue="Date doesn't exist in
system";
isValid=false;
} else{ $("date_of_order_error").firstChild.nodeValue="";}
if(emailAddress !="cherryjackson#gmail.com", "michealroberts#yahoo.com",
"sandrabell#hotmail.com", "cookiedanny#outlook.com")
{
$("email_address_error").firstChild.nodeValue="The email doesn't exist";
isValid=false;
} else{ $("email_address_error").firstChild.nodeValue="";}
if(isValid)
{
//submit the form if all entries are valid
$("cookie_form").submit();
}
}
window.onload = function()
{
$("form_submission").onclick = submitForm;
$("email_address").focus();
}
body{
background-color:#FBFBE8;
}
/* Tells HTML5 to find the font-type-face that my OS has and then use that for heading 1
and also centers the first heading */
h1{
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
/* Tells HTML5 to use any of the font-types for my first paragraph in HTML source file
if one is not available. Also clears some white space
from the left margin of the paragraph and finally tells it to give that paragraph
a size of 20 pixels. */
p{
font-family:Arial, Helvetica, sans-serif;
padding: 20px;
font-size:20px;
}
label{
float: left;
width: 11em;
text-align: right;
font-family:Arial, Helvetica, sans-serif;
color:#800000;
}
input{
margin-left: 1em;
margin-bottom:.5em;
}
span{
color: red;
}
.field_set_1{
border-color: purple;
border-style: solid;
}
#form_submission{
background-color:black; color:white;
}
legend{
font-family:Arial, Helvetica, sans-serif;
color:blue;
}
/* All of the classes are just for positioning and floating the four
same images around the form input information */
.Wrap1{
float:right;
margin:40px;
width:200px;
height:200px;
}
.Wrap2{
float:left;
margin:40px;
width:200px;
height:200px;
}
.clearfix {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<title>Cookie Order Form </title>
<link rel="stylesheet" href="First_Design.css">
<script src="cookieform.js"></script>
</head>
<body>
<h1>Cookie Order Form</h1>
<p>This form is a cookie order form for customers that purchased cookies from
Daron's Cookies Company and the following below must be filled out in order for each
customer to receive a final message that tells them when their order will be ready.</p>
<IMG class="Wrap1" SRC="cookie.gif" alt="cookie">
<IMG class="Wrap2" SRC="cookie.gif" alt="cookie2">
<!--The customer will be sent to the HTML page named "submit form.html" after they
click the "Submit this Form" button. The code below does this. -->
<div>
<form id="cookie_form" name="cookie_form" action="submit form.html" method="get">
<fieldset class="field_set_1">
<!-- Below sets the title of the form-->
    <legend>Customer Order Form Information:</legend>
<!-- Creates the first left label to specify what should be placed in the text box
the the right of the label. The rest below does the same.-->
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName">
<span id="firstname_error">*</span><br>
<label for="orderNumber">Order Number:</label>
<input type="text" id="orderNumber" name="orderNumber">
<span id="orderNumber_error">*</span><br>
<label for="date_of_order">Date of Order:</label>
<input type="text" id="date_of_order" name="date_of_order">
<span id="date_of_order_error">*</span><br>
<label for="email_address">Email Address:</label>
<input type="text" id="email_address" name="email_address">
<span id="email_address_error">*</span><br>
<label> </label>
<input type="button" id="form_submission" value="Submit this Form">
</fieldset>
</form>
</div>
<div class="clearfix">
</div>
<IMG class="Wrap1" SRC="cookie.gif" alt="cookie">
<IMG class="Wrap2" SRC="cookie.gif" alt="cookie2">
</body>
</html>

There were a great many things wrong with your code, but the biggest was your validation tests, that each followed the same structure of:
if(FirstName !== "Cherry", "Micheal", "Sandra", "Cookie")
You can't test firstName against a comma-separated list of values. Each one must be tested individually and you must use a compound logical operator between them:
if(FirstName !== "Cherry" && FirstName !== "Micheal" &&
FirstName !== "Sandra" && FirstName !== "Cookie")
You were also using a standard button, rather than a submit button, which can cause all your validation to be bypassed in some situations when the ENTER key is hit. Always use a submit button and validate in the submit event.
Please see my restructured and re-organized code solution for inline comments.
The Stack Overflow snippet environment (below) doesn't work with forms
(because it's sandboxed), but the same code can be run here.
// W3C DOM Event model instead of node event properties:
window.addEventListener("DOMContentLoaded", function() {
// Since we're now using the submit event, we hook into that event:
// Use camelCase for JavaScript identifiers
var form = getElem("cookieForm");
form.addEventListener("submit", validate);
getElem("emailAddress").focus();
// Opening curly braces should appear on the same line as the declaration they open
// Dollar signs are legal identifiers, but usually denote libraries (like JQuery) and
// can be confusing if you are not using those libraries.
function getElem (id) {
return document.getElementById(id);
}
function validate(evt) {
var inputs = document.querySelectorAll(".validate");
// It's better logic to assume false, which avoids "false positives"
var isValid = false;
// Loop through the fields that need validation
for (var i = 0; i < inputs.length; ++i){
var message = ""; // This is the potential error message
// Validate the input according to its id:
switch (inputs[i].id) {
case "firstName" :
// You can't check a single value against a comma-separated list, you have to check
// it against each value you are interested in:
isValid = (inputs[i].value !== "Cherry" && inputs[i].value !== "Micheal" &&
inputs[i].value !== "Sandra" && inputs[i].value !== "Cookie") ? false : true;
message = (!isValid) ? "This person does not exist." : "";
break;
case "orderNumber" :
// Remember, HTML form fields always return strings, not numbers
isValid = (inputs[i].value !== "3134" && inputs[i].value !== "4234" &&
inputs[i].value !== "9234" && inputs[i].value !== "3566") ? false : true;
message = (!isValid) ? "Invalid Order Number." : "";
break;
case "dateOfOrder" :
isValid = (inputs[i].value !=='12-07-23' && inputs[i].value !== '15-04-24' &&
inputs[i].value !== '16-02-01' && inputs[i].value !== '14-01-12') ? false : true;
message = (!isValid) ? "Date doesn't exist in system" : "";
break;
case "emailAddress" :
isValid = (inputs[i].value != "cherryjackson#gmail.com" &&
inputs[i].value !== "michealroberts#yahoo.com" &&
inputs[i].value !== "sandrabell#hotmail.com" &&
inputs[i].value !== "cookiedanny#outlook.com") ? false : true;
message = (!isValid) ? "The email doesn't exist" : "";
break;
}
// Update the UI with the correct message:
inputs[i].nextElementSibling.textContent = message;
}
if(!isValid) {
// cancel the submission if we're invalid
evt.preventDefault(); // Cancel the form's submission
evt.stopPropagation(); // Don't bubble the event
}
}
});
body{
background-color:#FBFBE8;
}
/* Tells HTML5 to find the font-type-face that my OS has and then use that for heading 1
and also centers the first heading */
h1{
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
/* Tells HTML5 to use any of the font-types for my first paragraph in HTML source file
if one is not available. Also clears some white space
from the left margin of the paragraph and finally tells it to give that paragraph
a size of 20 pixels. */
p {
font-family:Arial, Helvetica, sans-serif;
padding: 20px;
font-size:20px;
}
label{
float: left;
width: 11em;
text-align: right;
font-family:Arial, Helvetica, sans-serif;
color:#800000;
}
input{
margin-left: 1em;
margin-bottom:.5em;
}
span {
color: red;
}
.field_set_1{
border-color: purple;
border-style: solid;
}
#form_submission{ background-color:black; color:white; }
legend{
font-family:Arial, Helvetica, sans-serif;
color:blue;
}
/* All of the classes are just for positioning and floating the four
same images around the form input information */
.Wrap1{
float:right;
margin:40px;
width:200px;
height:200px;
}
.Wrap2{
float:left;
margin:40px;
width:200px;
height:200px;
}
.clearfix {
clear: both;
}
<form id="cookieForm" name="cookieForm" action="submit form.html" method="get">
<fieldset class="field_set_1">
<!-- Below sets the title of the form-->
    <legend>Customer Order Form Information:</legend>
<!-- Creates the first left label to specify what should be placed in the text box
the the right of the label. The rest below does the same.-->
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName" class="validate">
<span id="firstname_error">*</span><br>
<label for="orderNumber">Order Number:</label>
<input type="text" id="orderNumber" name="orderNumber" class="validate">
<span id="orderNumber_error">*</span><br>
<label for="dateOfOrder">Date of Order:</label>
<input type="text" id="dateOfOrder" name="dateOfOrder" class="validate">
<span id="dateOfOrder_error">*</span><br>
<label for="emailAddress">Email Address:</label>
<input type="text" id="emailAddress" name="emailAddress" class="validate">
<span id="emailAddress_error">*</span><br>
<label> </label>
<!-- Always use a "submit" button to initiate form submission, even
if there will be form validation -->
<input type="submit" id="form_submission" value="Submit this Form">
</fieldset>
</form>