Antoine Mazé's Blog
Input and Form validation using HTML5

Input and Form validation using HTML5

Antoine Mazé's photo
Antoine Mazé
·

4 min read

#draft version 1.3

Here my first (beta) post as I am working on a HTML form for a side project.

Please be indulgent and feel free to leave a comment helping me improving my English writing !

I would appreciate any feedback.

So let's start !

The Design of a form is a must and is required for mostly all the Web applications to get information from the user. From a security perspective, a form is a door on the IT system as it allows to create new data (usually into the database). From a data perspective, a first goal is to control that the input data has a functional meaning and check its consistency. On front side, this operation is a first level of control on the data format A second control MUST be implemented on server side to prevent unwanted data and enabling security checks. On front side, in an old and sometime existing Ajax world, JavaScript would be usually used to control the user form inputs. But now HTML 5 is well implemented by the browsers (see input tag): w3schools.com/tags/ref_html_browsersupport... HTML5 can help implement the control on data input and show a customized message when the user data are not valid.

By an example, let see how to implement this. 

<form id="personalinfo" name="personalinfo">

  <div class="form-group col-sm-6"">
          <label for="firstName">First Name *</label>
          <input type="text" class="form-control" id="firstname" aria-describedby="firstnameHelp" 
            name="firstname" placeholder="Enter your First Name" value="" minlength="1" maxlength="30" pattern="([a-zA-ZÀ-ž\s-]+)" 
            required oninput="this.reportValidity();" oninvalid="this.setCustomValidity('Enter only characters, space or -');" 
            onblur="this.setCustomValidity('');">            
            <small id="firstnameHelp" class="form-text alert-text text-muted" style="display:none;"></small>
   </div>

    <div class="form-group row">
        <div class="form-group col-sm-4 me-4">
          <button type="reset" class="btn btn-custom btn-secondary mb-1" value="reset">Reset</button>
        </div>
        <div class="form-group col-sm-4 me-4">
          <button type="submit" class="btn btn-custom btn-success mb-1" value="submit">Save</button>
        </div>
   </div>
</form>

Here we are solving the issue thanks to the HTML 5 new attributes of the input tag:

  • First by controlling the length of the data. For this, two options exists

    • By implementing the html minlength and maxlength attributes, here : minlength="1" maxlength="30"
    • By implementing a control using the pattern parameter such as : pattern="^[]{1,30}$"

  • Controlling data that must be only characters, space and - (dash) when submitting the form

    • Here we use the pattern parameter to implement the regular expression: pattern="([a-zA-ZÀ-ž\s-]+)" It would be also possible to enable alphanumeric data using the following pattern="([a-zA-ZÀ-ž0-9\s-]+)"

      However the validation of the pattern is carried out only when the user will click on the submit button of the form This can lead to a weird behavior when the user try to input correct value in second attempt on an input previously with the wrong format In this case, the message error will still appear on the input field even if the value is well formatted and the user clicks on the submit button of the form (tested on Chrome v105) That 's why the next point is crucial as it fixes this unwanted behavior

  • Implementing the control directly when the user has entered a data (before the pushing on the submit button) using the following parameter: oninput="this.reportValidity()"

  • The cherry on the cake is to be able to customize the message when the format is invalid by calling a existing function: oninvalid="this.setCustomValidity('Enter only characters, space or -')" onvalid="" Calling this.setCustomValidity(''); function on the onblur attribute will allow to reset the error message and disable the invalid status of the pattern. It solves some css issue when you would like to have red input on the invalid input and green on the valid one. Without this onblur setting, the input will stay red even if the input value is correct.

input:optional {
    border-color: gray;
}
input:required {
    border-color: black;
}
input:valid {
    border-color: lightgreen;
}
input:invalid {
    border-color: lightcoral;
}

In conclusion, HTML 5 brings new features to implement the check on form inputs without JavaScript. The advantage is to provide a clearer code with a standard behavior. In comparison, the JavaScript approach would give more flexibility by implementing customized function. And you, what would be your choice ?

HTML5HTMLformsdjango forms