HTML Course 9.6 placeholder, required, pattern and other validation helpers

9.6 Placeholder, Required, Pattern and Other Validation Helpers

HTML5 provides a suite of built-in validation attributes and helpers to guide users,
improve form usability, and reduce the need for JavaScript. In this section we cover:

• placeholder: hint text shown when the field is empty
• required: enforces non-empty entry
• pattern: a regular expression that the value must match
• Additional attributes: min, max, step,
  minlength, maxlength, multiple, etc.
• title for custom validation messages in some browsers

1. Placeholder

The placeholder attribute displays a hint inside an input when it is empty.
It does not substitute for a label (always pair with a <label> for accessibility).

<!-- Text input with placeholder -->
<label for='username'>Username:</label>
<input id='username' name='username' type='text'
       placeholder='e.g. johndoe123'>
  

2. Required

The required attribute forces the user to fill out the field
before submitting. Browsers will display a validation error if left blank.

<!-- Email field that must be filled -->
<label for='email'>Email:</label>
<input id='email' name='email' type='email' required
       placeholder='you@example.com'>
  

3. Pattern

The pattern attribute accepts a regular expression. The value
must match the entire pattern. Note: anchor characters (^, $)
are implicit.

<!-- 4-digit PIN example -->
<label for='pin'>Enter 4-digit PIN:</label>
<input id='pin' name='pin' type='text' required
       pattern='\d{4}'
       title='Please enter exactly 4 digits'>
  

4. Other Validation Attributes

Beyond pattern and required, you can combine:

• min / max – numeric or date range checks
• step – increments for numeric/date inputs
• minlength / maxlength – text length limits
• multiple – allow multiple values (e.g. multiple email addresses or file uploads)
• title – override the default tooltip message

<!-- Date of birth between two dates -->
<label for='dob'>Date of Birth:</label>
<input id='dob' name='dob' type='date' required
       min='1900-01-01' max='2020-12-31'>

<!-- Number with step and range -->
<label for='quantity'>Quantity (1-10):</label>
<input id='quantity' name='quantity' type='number' required
       min='1' max='10' step='1'>

<!-- Textarea with minlength/maxlength -->
<label for='bio'>Bio (50–200 chars):</label>
<textarea id='bio' name='bio' rows='4' required
          minlength='50' maxlength='200'
          placeholder='Tell us about yourself...'></textarea>

<!-- Email input allowing multiple addresses -->
<label for='emails'>CC Emails:</label>
<input id='emails' name='emails' type='email' multiple
       placeholder='one@example.com, two@example.com'>
  

5. Customizing Validation Messages

Some browsers display the title attribute when the pattern or range is invalid.
To fully customize messages, you can use JavaScript’s Constraint Validation API:

<!-- Example of JS for custom validation -->
<form id='signupForm'>
  <label for='user'>Username:</label>
  <input id='user' name='user' type='text'
         required minlength='5' placeholder='min 5 chars'>
  <button type='submit'>Submit</button>
</form>

<script>
  const form = document.getElementById('signupForm');
  form.addEventListener('submit', function(event) {
    const userInput = form.user;
    if (!userInput.checkValidity()) {
      // Prevent form from submitting
      event.preventDefault();
      // Customize message based on validity state
      if (userInput.validity.valueMissing) {
        userInput.setCustomValidity('Username is required.');
      } else if (userInput.validity.tooShort) {
        userInput.setCustomValidity('Username must be at least 5 characters.');
      } else {
        userInput.setCustomValidity('');
      }
      // Report the error
      userInput.reportValidity();
    }
  });
</script>
  

Summary

Leveraging HTML5 built-in validation:

• Reduces JavaScript overhead
• Improves accessibility when paired with labels and titles
• Provides consistent UX across modern browsers

Always test forms in multiple browsers and devices to ensure validation behaves as expected.