Re: Javascript Validation in HTML5

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

Murdoch Singaporean Registration Form

Reply to "Re: Javascript Validation in HTML5"