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 others 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 input change event that calls TelCell function, and inputs are both required.

Here 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 future HTML version.