Click here to Skip to main content
12,699,898 members (35,221 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


5 bookmarked

HTML5 Form Validation and Alternative Inputs

, 7 May 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
How to make two or more input alternatives, as: insert phone or cell number.


Often in a form, there's the need to insert only an input or two and make checks on them. Here, I'll show how to do this with HTML5 form validation without jQuery or other frameworks.


To understand this trick, you should know how HTML5 form validation works and a bit of JavaScript.

Using the Code

Here a part of HTML form made with bootstrap:

<div class="row-fluid">                                                
   <div class="span3">
       <input type="text" style="width:90%" 
       placeholder="Cell" name="cell" 
       onchange="TelCell(this)" required
       title="Insert a good cell number" x-moz-errormessage="
       Insert a good cell number"  pattern="[0-9]+">

   <div class="span3">
       <input type="text" style="width:95%" 
       placeholder="Phone" name="tel" 
       onchange="TelCell(this)" required
       pattern="[0-9]+" title="Insert a good phone number" 
       x-moz-errormessage="Insert a good phone number" >

Here, you can see that there's the input change event that calls the TelCell function, and inputs are both required.

Here is the JavaScript code:

function TelCell(objInput) {
    var divFather = objInput.parentNode.parentNode;
    var children = divFather.querySelectorAll("input");
    var sibling;

    //get the sibling, by the name of input passed
        // I know the inputs order: see HTML code 
    if(children[0].name ==
        sibling = children[1];
        sibling = children[0];

    //check objInput value and pattern
    if(objInput.value.trim() != "" &&  objInput.checkValidity() == true) {
        //objInput is ok, the other input is not required
    } else {
        if(sibling.value.trim() != "" && sibling.checkValidity() == true) {
            //if the sibling is ok, this input is not necessary
            sibling.setAttribute("required", "required");
        } else {
            //at this point inputs are invalid
            objInput.setAttribute("required", "required");
            sibling.setAttribute("required", "required");

I hope that something like this can be made in default with a future HTML version.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Giuseppe Luciano
Software Developer
Italy Italy
My name is Giuseppe Luciano and I graduated at Salerno University (Italy).
I'm software developer and a Artificial Intelligence enthusiast

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170118.1 | Last Updated 7 May 2013
Article Copyright 2013 by Giuseppe Luciano
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid