An invalid form control with name='' is not focusable

Taming form controls: A checklist

Forms behave better when we understand their ins and outs. Here's how we can avoid some usual traps.

• On custom validated forms, silence HTML5's chatterbox validation using novalidate.
• Use JavaScript to toggle 'required' on visible fields, thus avoiding invisible errors.

Diving into validation

A form is a silent ambassador of your website. A neat form with a coherent validation process improves the user experience. Here's how this diplomacy works:

Catering to the required fields

Accessible required fields keep Chrome validation demons at bay. Rely on JavaScript to handle required on conditionally visible fields:

document.querySelector('#myField').required = isVisible; // "isVisible" sound like an underpaid intern, isn't it?


Accidental activations

Subtle signals can differentiate buttons. Proper type barely costs any bytes:

<button type="button">I don't submit forms.</button>
<button type="submit">I'm the boss.</button>


Taming the flow of control

Organize the form flow to avoid random bumps. Use preventDefault() during event handling to maintain the submission sequence manually:

// `preventDefault` sounds like a misfit superhero name. 
form.addEventListener('submit', function(evt) { 
  if (!form.checkValidity()) {
    evt.preventDefault(); // Powers activated!
  }
});


Hidden but necessary

Conceal indispensable fields effectively with opacity: 0; rather than display: none;. That way, "invisible" doesn't mean "ineffective".

Dealing with browser peculiarities

Specific validation errors and focus issues are like browser features, unpaid extras! Debugging these issues generally involves exploring the DOM and styles in the browser's inspector tool.

Debugging with style

The browser console is crucial for troubleshooting focus issues and for understanding how browsers handle them.

Standardized validation with CheckValidity()

HTML5's checkValidity() function offers us a universal way of validating forms across browsers.

    // checkValidity() sounds like an insurance scam..
if (document.querySelector('#myForm').checkValidity()) { 
  // Form validation: Check!
} else {
  // Form! You had one job...
}


Inter-browser hoops

Chrome may spring surprises by behaving differently from, say, Firefox or Edge. This means your validation logic must be ready to handle browser-specific antics.