<!doctype html>
var letters = /^[A-Za-z]+$/;
var Numbers = /^[0-9]+$/;
var Symbols = /[$-/:-?{-~!"^_`\[\]]/;
var DateFormat = /^(0?[1-9]|[12][0-9]|3[01])[\/](0?[1-9]|1[012])[\/]\d{4}$/;
var EmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const form = document.getElementById("form");
var BatchValidate = 0;
function FirstNameValidation()
{
var FirstNameInput = document.getElementById("FirstName");
var CheckEmpty = FirstNameInput.value.length;
var ErrorElement = document.getElementById("FNError");
var isEmpty;
if(CheckEmpty!=0)
{
isEmpty = false;
}
else {
ErrorElement.innerHTML ="There is no Input";
isEmpty = true;
}
if(!isEmpty)
{
if(FirstNameInput.value.match(letters))
{
ErrorElement.innerHTML = "Valid Input";
BatchValidate = 0;
}
else
{
ErrorElement.innerHTML ="Invalid Input (Numbers or symbols detected)";
BatchValidate = 1;
}
}
}
function LastNameValidation()
{
var LastNameInput = document.getElementById("LastName");
var CheckEmpty = LastNameInput.value.length;
var ErrorElement= document.getElementById("LNError")
var isEmpty;
if(CheckEmpty!=0)
{
isEmpty = false;
}
else
{
ErrorElement.innerHTML = "There is no Input";
BatchValidate = 1;
isEmpty = true;
}
if(!isEmpty)
{
if(LastNameInput.value.match(letters))
{
ErrorElement.innerHTML = "Valid Input";
BatchValidate = 0;
}
else
{
ErrorElement.innerHTML = "Invalid Input (Numbers of symbol detected)";
BatchValidate = 1;
}
}
}
function StudentNumberValidation()
{
var S_Number = document.getElementById("StudentNumber");
var CheckEmpty = S_Number.value.length;
var ErrorElement = document.getElementById("StudentError");
var isEmpty;
if(CheckEmpty==0)
{
StudentError.innerHTML="No Input detected";
BatchValidate = 1;
isEmpty = true;
}
else
{
isEmpty = false;
}
if(!isEmpty && S_Number.value.match(letters))
{
ErrorElement.innerHTML="Invalid Input (Letters detected)";
BatchValidate = 1;
}
else if((!isEmpty) && (CheckEmpty>8||CheckEmpty<8) && (S_Number.value.match(Numbers)))
{
ErrorElement.innerHTML="Invalid input (more or less than 8 numbers)";
BatchValidate = 1;
}
else if((!isEmpty) && (!S_Number.value.match(Numbers)))
{
ErrorElement.innerHTML = "Invalid Input (Letters detected)";
BatchValidate = 1;
}
else if(!isEmpty && S_Number.value.match(Numbers) && CheckEmpty==8)
{
ErrorElement.innerHTML="Valid Input";
BatchValidate = 0;
}
}
function NumberValidation()
{
var NumberInput = document.getElementById("PhoneNumber").value;
var checkEmpty = NumberInput.length;
var ErrorElement = document.getElementById("PhoneError");
var Substring = NumberInput.substring(3,12);
var CheckNumberInput = NumberInput.substr(0,NumberInput.length);
var isEmpty;
if(checkEmpty==0)
{
ErrorElement.innerHTML ="Please Input a Telephone Number";
BatchValidate = 1;
isEmpty = true;
}
else
{
isEmpty = false;
}
if(!isEmpty && !NumberInput.startsWith("+65"))
{
ErrorElement.innerHTML = "Please add in the prefix (+65)";
BatchValidate = 1;
}
else if(!isEmpty && NumberInput.startsWith("+65") && CheckNumberInput.length>11 || CheckNumberInput.length<11)
{
ErrorElement.innerHTML = "Please enter a 8 number phone number";
BatchValidate = 1;
for(var i = 0;i<CheckNumberInput.length;i++)
{
if(CheckNumberInput.charAt(i).match(letters) || Substring.charAt(i).match(Symbols))
{
ErrorElement.innerHTML = "No letters or Symbols allowed";
BatchValidate = 1;
}
}
}
else if(!isEmpty && NumberInput.startsWith("+65") && Substring.match(Numbers) )
{
ErrorElement.innerHTML = "Valid Input";
BatchValidate = 0;
}
}
function EnrollmentDateValidation()
{
var DateInput = document.getElementById("EnrollmentDate").value;
var ErrorElement = document.getElementById("EnrollmentError");
var CheckEmpty = DateInput.length;
var isEmpty;
if(CheckEmpty==0)
{
ErrorElement.innerHTML = "Please Input a date";
BatchValidate = 1;
isEmpty = true;
}
else
{
isEmpty = false;
}
if(!isEmpty && DateInput.match(DateFormat))
{
ErrorElement.innerHTML = "Correct Format";
BatchValidate = 0;
}
else if(!isEmpty && !DateInput.match(DateFormat))
{
ErrorElement.innerHTML = "Wrong Format";
BatchValidate = 1;
}
}
function DOBValidation()
{
var DateInput = document.getElementById("DateofBirth").value;
var ErrorElement = document.getElementById("DOBError");
var CheckEmpty = DateInput.length;
var isEmpty;
if(CheckEmpty==0)
{
ErrorElement.innerHTML = "Please Input a date";
BatchValidate = 1;
isEmpty = true;
}
else
{
isEmpty = false;
}
if(!isEmpty && DateInput.match(DateFormat))
{
ErrorElement.innerHTML = "Correct Format";
BatchValidate = 0;
}
else if(!isEmpty && !DateInput.match(DateFormat))
{
ErrorElement.innerHTML = "Wrong Format";
BatchValidate = 1;
}
}
function EmailValidation()
{
var EmailInput = document.getElementById("Email").value;
var ErrorElement = document.getElementById("EmailError");
var CheckEmpty = EmailInput.length;
var isEmpty;
if(CheckEmpty==0)
{
ErrorElement.innerHTML = "Please Input an Email";
BatchValidate = 1;
isEmpty = true;
}
else
{
isEmpty = false;
}
if(!isEmpty && !EmailInput.match(EmailFormat))
{
ErrorElement.innerHTML = "Please enter an valid Email";
BatchValidate = 1;
}
else if(!isEmpty && EmailInput.match(EmailFormat))
{
ErrorElement.innerHTML = "Valid Input";
BatchValidate = 0;
}
}
function StudyStatusValidate()
{
var message = document.getElementById("StatusMsg");
if(document.getElementById("Study Status").checked)
{
message.innerHTML = "InputChecked";
BatchValidate = 0;
}
else
{
message.innerHTML = "Please select an option";
BatchValidate = 1;
}
}
function CourseValidaiton()
{
var message = document.getElementById("CourseMsg");
if(document.getElementById("Course").checked)
{
message.innerHTML = "InputChecked";
BatchValidate = 0;
}
else
{
message.innerHTML = "Please select an option";
BatchValidate = 1;
}
}
function PastTimeValidation()
{
var message = document.getElementById("PastTimeMsg");
if(document.getElementById("Favourite Pastime").checked)
{
message.innerHTML = "InputChecked";
BatchValidate = 0;
}
else
{
message.innerHTML = "Please select an option";
BatchValidate = 1;
}
}
function BatchValidation()
{
FirstNameValidation();
LastNameValidation();
NumberValidation();
StudentNumberValidation();
EnrollmentDateValidation();
DOBValidation();
EmailValidation();
StudyStatusValidate();
CourseValidaiton();
PastTimeValidation();
if(BatchValidate == 0)
{
return true;
}
else
{
return false;
}
}
<h1>Murdoch Singaporean Registration Form
</h1>
 
<input id="FirstName" name="FirstName" type="text" placeholder="FirstName" oninput ="FirstNameValidation()" required/>
<div id = "FNError"></div>
<br></br>
<label> Last-Name</label>
<input id ="LastName" name="LastName" type="text" placeholder = "LastName" oninput = "LastNameValidation()" required/>
<div id = "LNError"></div>
<br></br>
<label> Student Number</label>
 
<input id="StudentNumber" name="StudentNumber" type="Student Number" placeholder="Murdoch Number" oninput = "StudentNumberValidation()"/>
<div id = "StudentError"></div>
<br></br>
<label> Phone Number</label>
 
<input id="PhoneNumber" name="PhoneNumber" type = "text" placeholder="With prefix" oninput = "NumberValidation()"/>
<div id = "PhoneError"></div>
<br></br>
<label>Enrollment Date </label>
 
<input id="EnrollmentDate" name="EnrollmentDate" type="text" placeholder="dd/mm/yyyy" oninput = "EnrollmentDateValidation()"/>
<div id = "EnrollmentError"></div>
<br></br>
<label>Date of Birth</label>
 
<input id="DateofBirth" name="DateofBirth" type = "text" placeholder = "dd/mm/yyyy" oninput = " DOBValidation()" />
<div id= "DOBError"></div>
<br></br>
<label>Email</label>
 
<input id="Email" name="Email" type="email" placeholder="[email protected]" oninput = "EmailValidation()"/> <div id="EmailError"></div>
<br></br>
<label>Study Status</label>
 
<input id="Study Status" name="Study Status" type = "radio" value="Full-Time"> Full-Time
<input id="Study Status" name="Study Status" type ="radio" value ="Part-Time"> Part-Time
<div id = "StatusMsg"></div>
<br></br>
<label> Major </label>
<select>
<option> Single Major
<option> Double Major
<option> Triple Major
</select>
<br></br>
<label>Course</label>
 
<input id="Course" name="Course" type = "radio" value="Information Technology"> Information Technology
<input id="Course" name="Course" type ="radio" value ="Business"> Business
<input id="Course" name="Course" type = "radio" value ="Psycology">Psycology
<div id = "CourseMsg"></div>
<br></br>
<label> Highest Qualification </label>
 
<select>
<option> Diploma
<option> Higher Nitec
<option> Nitec
<option> A level
<option> N level
<option> O level
<option> PSLE
</select>
<br></br>
<label>Favourite Pastime</label>
 
<input id="Favourite Pastime" name = "Favourite Pastime" type ="radio" value="Surfing the Web">Surfing the Web
<input id="Favourite Pastime" name = "Favourite Pastime" type ="radio" value="Playing Sport">Playing Sport
<input id="Favourite Pastime" name = "Favourite Pastime" type ="radio" value="Listening to Music">Listening to Music
<input id="Favourite Pastime" name = "Favourite Pastime" type ="radio" value="Watching TV">Watching TV
<input id="Favourite Pastime" name = "Favourite Pastime" type ="radio" value=" Playing Games"> Playing Games
<br></br>
<input id="Favourite Pastime" name = "Favourite Pastime" type ="radio" value=" Community Service"> Community Service
<input id="Favourite Pastime" name = "Favourite Pastime" type ="radio" value=" Daydreaming"> Daydreaming
<input id="Favourite Pastime" name = "Favourite Pastime" type ="radio" value=" Reading"> Reading
<input id="Favourite Pastime" name = "Favourite Pastime" type ="radio" value=" Meditation"> Meditation
<div id = "PastTimeMsg"></div>
<br></br>
<input type = submit value = "Submit Form" onclick = "return BatchValidation()">
 
<input type = reset value = "Clear Form">
</form>
</body>
</html>
