HTML Part - 5

Understanding HTML 5 validation feature

Validation is one of the most important features from the day 1 of application development. For implementing validation we have been using many libraries such as jQuery validation, live validation etc.

But now validation code will become a standard code with the help of new HTML 5 validation support.

 implement validation using “type” attribute of input element

Step 1 – Create Form tag and add different input elements as follows

<form>

 <table>

  <tr>

    <td>

        <label>E-mail:</label>

        <input type="email" id="email" name="email" />


        <label>URL:</label>

        <input type="url" id="url" name="url" />


        <label>Telephone</label>

        <input type="tel" id="phone" name="phone" />


        <label>Number Demo:</label>

        <input type="number" name="MyNumberElement" id="MyNumberElement" />


        <label>Range Demo:</label>

        <input type="range" name="MyRangeElement" id="MyRangeElement" />


        <label>Color Demo</label>

        <input type="color" id="MyColorElement" name="MyColorElement" />

    </td>

    <td>

        <label>Date Demo</label>

        <input type="date" id="MyDateElement" name="MyDateElement" />


        <label>Time Demo</label>

        <input type="time" id="MyTimeElement" name="MyTimeElement" />


        <label>DateTime Local Demo</label>

        <input type="datetime-local" id="datetime" name=" datetime" />


        <label>Month Demo</label>

        <input type="month" id="month" name="month" />


        <label>Week Demo</label>

        <input type="week" id="MyWeekElement" name="MyWeekElement" />


        <div style="text-align:right">

          <input type="submit" value="validate" />

        </div>

    </td>

  </tr>

 </table>

</form>

Note: In the code you can see that we have introduced some new input types like email, url, tel etc. These types will only serves validation. As per rendering is concerned they will simply generates textbox.

Step 2 – Execute and test the application

As you can see values in the input controls are validated and a predefined error message is shown (in a popup) automatically in case of validation fail.

Note: In the image I have shown demo for only three input controls. You can download the source attached and check for other

Implementing validation using custom validation attributes

In HTML 5 new attributes are added input controls to support validation. Let’s do a demo on some of them.

Step 1 – Create input controls as follows

<form>

    <label>Email</label>

    <input type="email" name="TxtEmail"

          id="TxtEmail" required />


    <label>User Name</label>

    <input type="text" name="username"

          id="username" pattern="[a-zA-Z]{5,}" />


    <label>Age</label>

    <input type="number" name="TxtAge"

          id="TxtAge" min="10" max="50" />


    <br /><input type="submit" value="Register" />

</form>

Explanation:

• Required attributes makes textbox a compulsory field
• Pattern attribute is set to a regular expression indicating that it should contain minimum 5 and maximum 10 character
• Min and Max attribute works with number input control and force control to contain values within that range.

Output:

Customizing validation

We can customize HTML 5 validation completely by handling “oninvalid” event.

Step 1 – Create Input controls, attach validation attributes and add customized error messages as follows

<form>

    <label>Email</label>

    <input type="email" name="TxtEmail"

            id="TxtEmail"  required/>

    <span class="MissingEmailSpan invalid">Email Missing</span>

    <span class="InvalidEmailSpan invalid">Invalid email</span>



    <label>User Name</label>

    <input type="text" name="username"

            id="username" pattern="[a-zA-Z]{5,10}"  />

    <span class="InvalidUserNameSpan invalid">Username not matching with pattern</span>


    <label>Age</label>

    <input type="number" name="TxtAge"

            id="TxtAge" min="10" max="50" />

    <span class="AgeIsNotInRangeSpan invalid">Age must be be between 10 and 50</span>

    <span class="InvalidAgeSpan invalid">Invalid Age</span>


    <br /><input type="submit" value="Register" />

</form>

Step 2 – Add a style tag and create css to hide error messages initiall

<style>

        .invalid {

            display: none;

        }

</style>

Step 3 – Hide error message on submit click.

<input type="submit" value="Register" onclick="$('.invalid').hide();" />

Step 4 – Invoke functions when input controls contain invalid values.

<input type="email" name="TxtEmail" id="TxtEmail" oninvalid="OnInvalidEmail();" required/>

(Repeat above step for all input controls)

Step 5 – Create Event handler JavaScript function as follows.

function OnInvalidEmail()

{

    event.preventDefault();

    var element = event.srcElement;

    var validity = element.validity;

    if (validity.valueMissing) {

        $('.MissingEmailSpan').show();

    }

    else if (validity.typeMismatch) {

        $('.InvalidEmailSpan').show();

    }

}

(Repeat above step for all input controls)

Explanation:

• event.preventDefault();  - It will prevent the default behavior. Show error message as popup.
• event.srcElement - Control to which contain invalid value. In this case email textbox.
• element.validity – Contains the validation information about control. Important attributes are
  • valueMissing – will be true when “required” attribute is attached to control and current value is blank.
  • typeMismatch – will be true when type mismatches with current value of control.
  • badInput – will be true when value in the control is invalid. Example – It’s a number textbox and alphatic character is added.
  • rangeOverflow and rangeUnderflow – will be true when control is number textbox and values are not within the range

Step 5 – Execute and Test the application

You can download the attached source code for complete demonstration

                                             Source collected from CodeProject.com