Re: Javascript Validation in HTML5

From Silly Duck, 4 Years ago, written in HTML5.

This paste is a reply to Javascript Validation in HTML5 from Tan Jun Qi - view diff

Embed

Download Paste or View Raw
Hits: 30

<!doctype html>

<html>

<head>

<title> Murdoch Registration Form </title>

<script>

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;

}

}

</script>

</head>

<body>

<h1>Murdoch Singaporean Registration Form</h1>

<hr>

<form name ="form">

<br></br>

<label> First-Name </label>

&nbsp

<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>

&nbsp

<input id="StudentNumber" name="StudentNumber" type="Student Number" placeholder="Murdoch Number" oninput = "StudentNumberValidation()"/>

<div id = "StudentError"></div>

<br></br>

<label> Phone Number</label>

&nbsp

<input id="PhoneNumber" name="PhoneNumber" type = "text" placeholder="With prefix" oninput = "NumberValidation()"/>

<div id = "PhoneError"></div>

<br></br>

<label>Enrollment Date </label>

&nbsp

<input id="EnrollmentDate" name="EnrollmentDate" type="text" placeholder="dd/mm/yyyy" oninput = "EnrollmentDateValidation()"/>

<div id = "EnrollmentError"></div>

<br></br>

<label>Date of Birth</label>

&nbsp

<input id="DateofBirth" name="DateofBirth" type = "text" placeholder = "dd/mm/yyyy" oninput = " DOBValidation()" />

<div id= "DOBError"></div>

<br></br>

<label>Email</label>

&nbsp

<input id="Email" name="Email" type="email" placeholder="[email protected]" oninput = "EmailValidation()"/>

<div id="EmailError"></div>

<br></br>

<label>Study Status</label>

&nbsp

<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>

&nbsp

<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>

&nbsp

<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>

&nbsp

<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()">

&nbsp

<input type = reset value = "Clear Form">

</form>

</body>

</html>

Author

Title

Language

Your paste - Paste your paste here

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt; Murdoch Registration Form &lt;/title&gt;
&lt;script&gt;
    
  var letters = /^[A-Za-z]+$/;
  var Numbers = /^[0-9]+$/;
  var Symbols = /[$-/:-?{-~!&quot;^_`\[\]]/;
  var DateFormat = /^(0?[1-9]|[12][0-9]|3[01])[\/](0?[1-9]|1[012])[\/]\d{4}$/;
  var EmailFormat = /^(([^&lt;&gt;()[\]\\.,;:\s@\&quot;]+(\.[^&lt;&gt;()[\]\\.,;:\s@\&quot;]+)*)|(\&quot;.+\&quot;))@((\[[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(&quot;form&quot;);
  var BatchValidate = 0;
  
  
  
      
    function FirstNameValidation()
    {
    
    var FirstNameInput = document.getElementById(&quot;FirstName&quot;);
    var CheckEmpty = FirstNameInput.value.length;
    var ErrorElement = document.getElementById(&quot;FNError&quot;);
    var isEmpty;
    if(CheckEmpty!=0)
    {

isEmpty = false;
    }
    else {
      ErrorElement.innerHTML =&quot;There is no Input&quot;;
      isEmpty = true;
    }
    if(!isEmpty)
    {
      if(FirstNameInput.value.match(letters))
          {
              ErrorElement.innerHTML = &quot;Valid Input&quot;;
              BatchValidate = 0;
             
          }
        else
            {
                ErrorElement.innerHTML =&quot;Invalid Input (Numbers or symbols detected)&quot;;
                BatchValidate = 1;
            }
    }
      
    }
    
    function LastNameValidation()
    {
        var LastNameInput = document.getElementById(&quot;LastName&quot;);
        var CheckEmpty = LastNameInput.value.length;
        var ErrorElement= document.getElementById(&quot;LNError&quot;)
        var isEmpty;
        if(CheckEmpty!=0)
        {

isEmpty = false;
        }
        else 
        {
            ErrorElement.innerHTML = &quot;There is no Input&quot;;
            BatchValidate = 1;
            isEmpty = true;
        }
    if(!isEmpty)
    {
      if(LastNameInput.value.match(letters))
          {
              ErrorElement.innerHTML = &quot;Valid Input&quot;;
              BatchValidate = 0;
          }
        else
            {
               ErrorElement.innerHTML = &quot;Invalid Input (Numbers of symbol detected)&quot;;
               BatchValidate = 1;
            }
    }
    }
    
    function StudentNumberValidation()
    {
        var S_Number = document.getElementById(&quot;StudentNumber&quot;);
        var CheckEmpty = S_Number.value.length;
        var ErrorElement = document.getElementById(&quot;StudentError&quot;);
        var isEmpty;
        if(CheckEmpty==0)
            {
                StudentError.innerHTML=&quot;No Input detected&quot;;
                BatchValidate = 1;
                isEmpty = true;
                
            }
        else
            {
                isEmpty = false;
            }
        if(!isEmpty &amp;&amp; S_Number.value.match(letters))
            {
                ErrorElement.innerHTML=&quot;Invalid Input (Letters detected)&quot;;
                BatchValidate = 1;
            }
        
        else if((!isEmpty) &amp;&amp; (CheckEmpty&gt;8||CheckEmpty&lt;8) &amp;&amp; (S_Number.value.match(Numbers)))
            {
               ErrorElement.innerHTML=&quot;Invalid input (more or less than 8 numbers)&quot;;
               BatchValidate = 1;
            }
        else if((!isEmpty) &amp;&amp; (!S_Number.value.match(Numbers)))
            {
                ErrorElement.innerHTML = &quot;Invalid Input (Letters detected)&quot;;
                BatchValidate = 1;
            }
        else if(!isEmpty &amp;&amp; S_Number.value.match(Numbers) &amp;&amp; CheckEmpty==8)
            {
               ErrorElement.innerHTML=&quot;Valid Input&quot;;
                BatchValidate = 0;
            }
  
    }
    
    function NumberValidation()
    {
        var NumberInput = document.getElementById(&quot;PhoneNumber&quot;).value;
        var checkEmpty = NumberInput.length;
        var ErrorElement = document.getElementById(&quot;PhoneError&quot;);
        var Substring = NumberInput.substring(3,12);
        var CheckNumberInput = NumberInput.substr(0,NumberInput.length);
        var isEmpty;
        
        if(checkEmpty==0)
            {
                ErrorElement.innerHTML =&quot;Please Input a Telephone Number&quot;;
                BatchValidate = 1;
                isEmpty = true;
            }
        else
            {
                isEmpty = false;
            }
         
         if(!isEmpty &amp;&amp; !NumberInput.startsWith(&quot;+65&quot;))
            {
                ErrorElement.innerHTML = &quot;Please add in the prefix (+65)&quot;;
                BatchValidate = 1;
            }
        else if(!isEmpty &amp;&amp; NumberInput.startsWith(&quot;+65&quot;) &amp;&amp; CheckNumberInput.length&gt;11 || CheckNumberInput.length&lt;11)
            {
                ErrorElement.innerHTML = &quot;Please enter a 8 number phone number&quot;;
                BatchValidate = 1;
                for(var i = 0;i&lt;CheckNumberInput.length;i++)
                    {
                        if(CheckNumberInput.charAt(i).match(letters) || Substring.charAt(i).match(Symbols))
                            {
                                ErrorElement.innerHTML = &quot;No letters or Symbols allowed&quot;;
                                BatchValidate = 1;
                            }
                    }
                
            }
        
         else if(!isEmpty &amp;&amp; NumberInput.startsWith(&quot;+65&quot;) &amp;&amp; Substring.match(Numbers) )
            {
                ErrorElement.innerHTML = &quot;Valid Input&quot;;
                BatchValidate = 0;
                
                
            }
    }
    
    function EnrollmentDateValidation()
    {
        
        var DateInput = document.getElementById(&quot;EnrollmentDate&quot;).value;
        var ErrorElement = document.getElementById(&quot;EnrollmentError&quot;);
        var CheckEmpty = DateInput.length;
        var isEmpty;
        if(CheckEmpty==0)
            {
                ErrorElement.innerHTML = &quot;Please Input a date&quot;;
                BatchValidate = 1;
                isEmpty = true;
            }
        else
            {
                isEmpty = false;
            }
        if(!isEmpty &amp;&amp; DateInput.match(DateFormat))
            {
                ErrorElement.innerHTML = &quot;Correct Format&quot;;
                BatchValidate = 0;
            }
        else if(!isEmpty &amp;&amp; !DateInput.match(DateFormat))
            {
                ErrorElement.innerHTML = &quot;Wrong Format&quot;;
                BatchValidate = 1;
            }
    }
    
    function DOBValidation()
    {
        var DateInput = document.getElementById(&quot;DateofBirth&quot;).value;
        var ErrorElement = document.getElementById(&quot;DOBError&quot;);
        var CheckEmpty = DateInput.length;
        var isEmpty;
        if(CheckEmpty==0)
            {
                ErrorElement.innerHTML = &quot;Please Input a date&quot;;
                BatchValidate = 1;
                isEmpty = true;
            }
        else
            {
                isEmpty = false;
            }
        if(!isEmpty &amp;&amp; DateInput.match(DateFormat))
            {
                ErrorElement.innerHTML = &quot;Correct Format&quot;;
                BatchValidate = 0;
            }
        else if(!isEmpty &amp;&amp; !DateInput.match(DateFormat))
            {
                ErrorElement.innerHTML = &quot;Wrong Format&quot;;
                BatchValidate = 1;
            }
    }
    
    function EmailValidation()
    {
        var EmailInput = document.getElementById(&quot;Email&quot;).value;
        var ErrorElement = document.getElementById(&quot;EmailError&quot;);
        var CheckEmpty = EmailInput.length;
        var isEmpty;
        if(CheckEmpty==0)
            {
                ErrorElement.innerHTML = &quot;Please Input an Email&quot;;
                BatchValidate = 1;
                isEmpty = true;
            }
        else
            {
                isEmpty = false;
            }
        if(!isEmpty &amp;&amp; !EmailInput.match(EmailFormat))
            {
                ErrorElement.innerHTML = &quot;Please enter an valid Email&quot;;
                BatchValidate = 1;
            }
        else if(!isEmpty &amp;&amp; EmailInput.match(EmailFormat))
            {
                ErrorElement.innerHTML = &quot;Valid Input&quot;;
                BatchValidate = 0;
            }
    }
    
    function StudyStatusValidate()
    {
        var message = document.getElementById(&quot;StatusMsg&quot;);
        if(document.getElementById(&quot;Study Status&quot;).checked)
            {
                message.innerHTML = &quot;InputChecked&quot;;
                BatchValidate = 0;
            }
        else
            {
                message.innerHTML = &quot;Please select an option&quot;;
                BatchValidate = 1;
            }
    }
    
    function CourseValidaiton()
    {
        var message = document.getElementById(&quot;CourseMsg&quot;);
        if(document.getElementById(&quot;Course&quot;).checked)
            {
                message.innerHTML = &quot;InputChecked&quot;;
                BatchValidate = 0;
            }
        else
            {
                message.innerHTML = &quot;Please select an option&quot;;
                BatchValidate = 1;
            }
    }
    
    function PastTimeValidation()
    {
        var message = document.getElementById(&quot;PastTimeMsg&quot;);
        if(document.getElementById(&quot;Favourite Pastime&quot;).checked)
            {
                 message.innerHTML = &quot;InputChecked&quot;;
                BatchValidate = 0;
            }
        else
            {
                message.innerHTML = &quot;Please select an option&quot;;
                BatchValidate = 1;
            }
    }
    
    
    function BatchValidation()
    {
        FirstNameValidation();
        LastNameValidation();
        NumberValidation();
        StudentNumberValidation();
        EnrollmentDateValidation();
        DOBValidation();
        EmailValidation();
        StudyStatusValidate();
        CourseValidaiton();
        PastTimeValidation();
        
        if(BatchValidate == 0)
            {
                return true;
            }
        else
            {
                return false;
            }
        
        
        
    }

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt;Murdoch Singaporean Registration Form&lt;/h1&gt;

&lt;hr&gt;

&lt;form name =&quot;form&quot;&gt;

&lt;br&gt;&lt;/br&gt;

&lt;label&gt; First-Name &lt;/label&gt;

&amp;nbsp

&lt;input id=&quot;FirstName&quot; name=&quot;FirstName&quot; type=&quot;text&quot; placeholder=&quot;FirstName&quot; oninput =&quot;FirstNameValidation()&quot; required/&gt;
    &lt;div id = &quot;FNError&quot;&gt;&lt;/div&gt;
    &lt;br&gt;&lt;/br&gt;

&lt;label&gt; Last-Name&lt;/label&gt;

&lt;input id =&quot;LastName&quot; name=&quot;LastName&quot; type=&quot;text&quot; placeholder = &quot;LastName&quot; oninput = &quot;LastNameValidation()&quot; required/&gt;
     
    &lt;div id = &quot;LNError&quot;&gt;&lt;/div&gt;

&lt;br&gt;&lt;/br&gt;
    
    &lt;label&gt; Student Number&lt;/label&gt;

&amp;nbsp
    &lt;input id=&quot;StudentNumber&quot; name=&quot;StudentNumber&quot; type=&quot;Student Number&quot; placeholder=&quot;Murdoch Number&quot; oninput = &quot;StudentNumberValidation()&quot;/&gt;
    
    &lt;div id = &quot;StudentError&quot;&gt;&lt;/div&gt; 
    &lt;br&gt;&lt;/br&gt;
    &lt;label&gt; Phone Number&lt;/label&gt;

&amp;nbsp

&lt;input id=&quot;PhoneNumber&quot; name=&quot;PhoneNumber&quot; type = &quot;text&quot; placeholder=&quot;With prefix&quot; oninput = &quot;NumberValidation()&quot;/&gt;
    &lt;div id = &quot;PhoneError&quot;&gt;&lt;/div&gt;

&lt;br&gt;&lt;/br&gt;

&lt;label&gt;Enrollment Date &lt;/label&gt;

&amp;nbsp

&lt;input id=&quot;EnrollmentDate&quot; name=&quot;EnrollmentDate&quot; type=&quot;text&quot; placeholder=&quot;dd/mm/yyyy&quot; oninput = &quot;EnrollmentDateValidation()&quot;/&gt;
    &lt;div id = &quot;EnrollmentError&quot;&gt;&lt;/div&gt;

&lt;br&gt;&lt;/br&gt;

&lt;label&gt;Date of Birth&lt;/label&gt;

&amp;nbsp
    &lt;input id=&quot;DateofBirth&quot; name=&quot;DateofBirth&quot; type = &quot;text&quot; placeholder = &quot;dd/mm/yyyy&quot; oninput = &quot; DOBValidation()&quot; /&gt;
    &lt;div id= &quot;DOBError&quot;&gt;&lt;/div&gt;

&lt;br&gt;&lt;/br&gt;

&lt;label&gt;Email&lt;/label&gt;

&amp;nbsp

&lt;input id=&quot;Email&quot; name=&quot;Email&quot; type=&quot;email&quot; placeholder=&quot;abc@example.com&quot; oninput = &quot;EmailValidation()&quot;/&gt;
    &lt;div id=&quot;EmailError&quot;&gt;&lt;/div&gt;

&lt;br&gt;&lt;/br&gt;

&lt;label&gt;Study Status&lt;/label&gt;

&amp;nbsp
    &lt;input id=&quot;Study Status&quot; name=&quot;Study Status&quot; type = &quot;radio&quot; value=&quot;Full-Time&quot;&gt; Full-Time
    &lt;input id=&quot;Study Status&quot; name=&quot;Study Status&quot; type =&quot;radio&quot; value =&quot;Part-Time&quot;&gt; Part-Time
    &lt;div id = &quot;StatusMsg&quot;&gt;&lt;/div&gt;
    &lt;br&gt;&lt;/br&gt;
    &lt;label&gt; Major &lt;/label&gt;
    &lt;select&gt;
      &lt;option&gt; Single Major
      &lt;option&gt; Double Major
      &lt;option&gt; Triple Major
    &lt;/select&gt;
    &lt;br&gt;&lt;/br&gt;
    &lt;label&gt;Course&lt;/label&gt;
    &amp;nbsp
    &lt;input id=&quot;Course&quot; name=&quot;Course&quot; type = &quot;radio&quot; value=&quot;Information Technology&quot;&gt; Information Technology
    &lt;input id=&quot;Course&quot; name=&quot;Course&quot; type =&quot;radio&quot; value =&quot;Business&quot;&gt; Business
    &lt;input id=&quot;Course&quot; name=&quot;Course&quot; type = &quot;radio&quot; value =&quot;Psycology&quot;&gt;Psycology
    &lt;div id = &quot;CourseMsg&quot;&gt;&lt;/div&gt;
    &lt;br&gt;&lt;/br&gt;
    &lt;label&gt; Highest Qualification &lt;/label&gt;
    &amp;nbsp
    &lt;select&gt;
      &lt;option&gt; Diploma
      &lt;option&gt; Higher Nitec
      &lt;option&gt; Nitec
      &lt;option&gt; A level
      &lt;option&gt; N level
      &lt;option&gt; O level
      &lt;option&gt; PSLE
    &lt;/select&gt;
    &lt;br&gt;&lt;/br&gt;

&lt;label&gt;Favourite Pastime&lt;/label&gt;
    &amp;nbsp
    &lt;input id=&quot;Favourite Pastime&quot; name = &quot;Favourite Pastime&quot; type =&quot;radio&quot; value=&quot;Surfing the Web&quot;&gt;Surfing the Web
    &lt;input id=&quot;Favourite Pastime&quot; name = &quot;Favourite Pastime&quot; type =&quot;radio&quot; value=&quot;Playing Sport&quot;&gt;Playing Sport
    &lt;input id=&quot;Favourite Pastime&quot; name = &quot;Favourite Pastime&quot; type =&quot;radio&quot; value=&quot;Listening to Music&quot;&gt;Listening to Music
    &lt;input id=&quot;Favourite Pastime&quot; name = &quot;Favourite Pastime&quot; type =&quot;radio&quot; value=&quot;Watching TV&quot;&gt;Watching TV
    &lt;input id=&quot;Favourite Pastime&quot; name = &quot;Favourite Pastime&quot; type =&quot;radio&quot; value=&quot; Playing Games&quot;&gt; Playing Games
    &lt;br&gt;&lt;/br&gt;

&lt;input id=&quot;Favourite Pastime&quot; name = &quot;Favourite Pastime&quot; type =&quot;radio&quot; value=&quot; Community Service&quot;&gt; Community Service
    &lt;input id=&quot;Favourite Pastime&quot; name = &quot;Favourite Pastime&quot; type =&quot;radio&quot; value=&quot; Daydreaming&quot;&gt; Daydreaming
    &lt;input id=&quot;Favourite Pastime&quot; name = &quot;Favourite Pastime&quot; type =&quot;radio&quot; value=&quot; Reading&quot;&gt; Reading
    &lt;input id=&quot;Favourite Pastime&quot; name = &quot;Favourite Pastime&quot; type =&quot;radio&quot; value=&quot; Meditation&quot;&gt; Meditation
    &lt;div id = &quot;PastTimeMsg&quot;&gt;&lt;/div&gt;
    &lt;br&gt;&lt;/br&gt;
    
    &lt;input type = submit value = &quot;Submit Form&quot; onclick = &quot;return BatchValidation()&quot;&gt;
    &amp;nbsp
    &lt;input type = reset value = &quot;Clear Form&quot;&gt;
  &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;

Private - Private paste aren't shown in recent listings.

Delete After - When should we delete your paste?

Spam protection -

Re: Javascript Validation in HTML5

Reply to "Re: Javascript Validation in HTML5"