Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

HTML5 Form Validation and Alternative Inputs

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

Introduction

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.

Background

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">
       <label>Cell</label>
       <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>

   <div class="span3">
       <label>Tel</label>
       <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" >
   </div> 
</div>  

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 == objInput.name)
        sibling = children[1];
    else 
        sibling = children[0];

    //check objInput value and pattern
    if(objInput.value.trim() != "" &&  objInput.checkValidity() == true) {
        //objInput is ok, the other input is not required
        sibling.removeAttribute("required");
    } else {
        if(sibling.value.trim() != "" && sibling.checkValidity() == true) {
            //if the sibling is ok, this input is not necessary
            sibling.setAttribute("required", "required");
            objInput.removeAttribute("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.

License

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

Share

About the Author

Giuseppe Luciano
Software Developer
Italy Italy
My name is Giuseppe Luciano and I graduated at Salerno University (Italy).
 
I'm developping software using: C++, Java, PHP, Python with MySql, MongoDB and SQLite.
Follow on   Google+

Comments and Discussions

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