Hello Readers!

In my earlier blog post, I explained about the checkbox validation using Javascript. This blog post will explain you the same thing using HTML5. Let me give a brief overview of checkbox validation here too.

While filling an online form, a form is considered complete only after we agree to the termas and conditions. The terms and conditions are given at the bottom of the page with a checkbox to agree on. With the terms and conditions, it is mentioned that the user is solely responsible for the entries entered in the fields. So, if a user agrees to this, he will check the checkbox, else not. This is checkbox validation.

For more detailed explanation, refer to my earlier blog post on “Checkbox validation using javascript”.

1. required input:

These are the input fields that are essentially required. The simplest change you can make in your input field is as follows:

HTML:

<form >
     <p><input type="checkbox" required name="terms"> I accept the <u>Terms and  Conditions</u></p>
     <p><input type="submit"></p>
</form>

Browser does not allow the form to be submitted without the checkbox checked. Browsers will recognise and enforce this:

Above code display the following output:

Following output will be seen if checkbox is not checked. You can see screen captures from Firefox and Chrome:

See the live demo at here:  https://jsfiddle.net/6xm1ht77/show/

The advantage of the HTML5 form validation is that text alert messages are generated entirely by the browser and will even translate automatically into different languages - something that would be almost impossible using JavaScript solely. Message will be displayed above (please check this box if you want to proceed) automatically by the browser.

2. Separating form from function

We can separate the JavaScript code from the HTML and have the required event handlers assigned after the page has loaded using an onload event listener.

Here output is displayed below and shows if checkbox is not checked. Text alert messages are generated automatically by browser and if checkbox is checked, and the Submit button is clicked, an alert message is displayed (success!) than you will proceed to the next step.

HTML:

<form  onsubmit="return checkForm1(this);">
    <p><input type="checkbox" required name="terms"> I accept the <u>Terms and 
    Conditions</u></p>
   <p><input type="submit"></p>
</form>

JavaScript:

<script type="text/javascript">
   function checkForm1(form){
      if(form.terms.checked){
          alert("Success!");
          form.terms.focus();
          return true;
      }
  }
</scritp>

Following output will show if checkbox is not checked. You can see screen captures from Firefox and Chrome

Following output will show if checkbox is checked  an alert message is displayed.