The problem is that I already have an id for each label. Can I have two? So I make one to be requiredField? That would be my solution.
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<link href="contactform.css" rel="stylesheet">
<script src="contactform.js"></script>
<title>Contact Form</title>
</head>
<body>
<h1>Contact Form</h1>
<!-- Turn HTML5 validation off to test Javascript data validation -->
<form id="contactform" action="#" method="post" novalidate>
<p><i>Please complete the form. Mandatory fields are marked with a </i><em>*</em></p>
<!-- Patient's name -->
<fieldset>
<legend>Patient's Name</legend>
<p><label for="name">First Name <em>*</em></label>
<input id="name" required>
<span id = "errorName" class="errorMessage"></span></p>
<p><label for="surname">Last Name <em>*</em></label>
<input id="surname" required>
<span id = "errorSurname" class="errorMessage"></span></p>
<p><label for="title">Title <em>*</em></label>
<select id="title" required>
<option value="">Please select</option>
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss.</option>
<option value="master">Master.</option>
</select><br>
<span id = "errorTitle" class="errorMessage"></span></p>
</fieldset>
<!-- Contact details -->
<fieldset>
<legend>Contact Details</legend>
<p><label for="telephone">Telephone</label>
<input id="telephone">
<span id = "errorTelephone" class="errorMessage"></span></p>
<p><label for="email">Email <em>*</em></label>
<input id="email" type="email" required>
<span id = "errorEmail" class="errorMessage"></span></p>
<!-- Health Number -->
<fieldset>
<legend>Health Information</legend>
<p><label for="healthNumber">Health Authority Number <em>*</em></label>
<input id="healthNumber" type="alphanumeric" min="0" max="120" step="0.1" required>
<span id = "errorHealthNumber" class="errorMessage"></span></p>
</fieldset>
<p><input type="submit" value="Submit" id=submit></p>
</form>
</body>
</html>
And the JS is here:
function main(){
document.getElementById("email").onblur = validateEmail;
document.getElementById("healthNumber").onblur = validateHealthNumber;
document.getElementById("name").onblur = validateRequiredFields;
}
function validateRequiredFields(){
var
}
function validateEmail(){
var emailRegEx = /^[\\w\\+\\.\\-]+@[\\w\\.\\-]+$/;
if (emailRegEx.test(email.value) != true) {
var errorEmail = document.getElementById("errorEmail");
errorEmail.innerHTML = "* Please write a valid email.";
return false;
} else {
return true;
}
}
function validateHealthNumber(){
var zhaNumberRegEx = /^[A-Z]{3}\\d{6}/;
if (zhaNumberRegEx.test(healthNumber.value) != true) {
var errorHealthNumber = document.getElementById("errorHealthNumber");
errorHealthNumber.innerHTML = "* Please write a valid health ID.";
return false;
} else {
return true;
}
}
window.onload = main;
I hope I don’t have to check one by one…
Here’s the demo: http://jsfiddle.net/Assembly21/LL8qa/12/
Thanks in advance.