Show Validation Errors Next to Each Input Field Using JavaScript

Other Questions JavaScript
1

I am currently working on a form for contact submissions and looking for guidance on displaying validation error messages effectively. The system I am using does validate correctly, but it aggregates all errors at the top of the form instead of showing them beside each relevant input field. I would prefer to have individual error messages right next to the input fields that require attention.

HTML Example:

<div class="success-message">Your form has been submitted successfully!</div>
<div class="error-message-container"></div>

<form name="contact_form">
  <label for="username">Username:</label>
  <input name="username" id="username" />
  <div class="error-username"></div>
  
  <label for="email">Email:</label>
  <input name="email" id="email" />
  <div class="error-email"></div>
  
  <label for="phone">Phone:</label>
  <input name="phone" id="phone" />
  <div class="error-phone"></div>
  
  <label for="message">Message (at least 10 characters):</label>
  <textarea name="message" id="message"></textarea>
  <div class="error-message"></div>
  
  <label for="terms">I agree to the terms</label>
  <input name="terms" id="terms" type="checkbox" />
  <div class="error-terms"></div>
  
  <button type="submit">Send</button>
</form>

JavaScript Implementation:

new ValidationSystem('contact_form', [{
  name: 'username',
  display: 'username',
  rules: 'required|alpha_numeric'
}, {
  name: 'email', 
  display: 'email',
  rules: 'required|valid_email'
}, {
  name: 'phone',
  display: 'phone', 
  rules: 'required|numeric'
}, {
  name: 'message',
  display: 'message',
  rules: 'required|min_length[10]'
}, {
  name: 'terms',
  display: 'terms checkbox',
  rules: 'required'
}], function(errors, event) {
  var ERROR_BOX = $('.error-message-container'),
      SUCCESS_BOX = $('.success-message');
      
  if (errors.length > 0) {
    ERROR_BOX.empty();
    
    for (var i = 0; i < errors.length; i++) {
      ERROR_BOX.append(errors[i].message + '<br />');
    }
    
    SUCCESS_BOX.hide();
    ERROR_BOX.show();
  } else {
    ERROR_BOX.hide();
    SUCCESS_BOX.show();
  }
  
  if (event && event.preventDefault) {
    event.preventDefault();
  }
});

What changes should I make in my code to ensure that validation errors are shown right beside each corresponding field? Are there any superior validation libraries available that already provide this capability?

2

you can target individual error divs instead. loop through the errors and use $('.error-' + errors[i].field).text(errors[i].message) to display each error next to its field. just clear all error divs first or they’ll pile up.

3

Your callback function is dumping everything into the central error container. Don’t use ERROR_BOX for all messages - target the specific error divs you already created. First, clear existing field errors: $(‘[class^=“error-”]’).empty(). Then loop through your errors and hit each field’s div directly. Replace ERROR_BOX.append(errors[i].message + ‘
’) with $(‘.error-’ + errors[i].name).text(errors[i].message). This assumes your ValidationSystem includes the field name in the errors object. You can probably hide the central error container entirely since you’re switching to inline validation. I’ve done this with similar validation libraries - way better UX.

4

Don’t append everything to one central container - target the individual error divs instead. Clear all field errors first: $('.error-username, .error-email, .error-phone, .error-message, .error-terms').empty(). Then loop through your errors and populate each field’s div: $('.error-' + errors[i].name).html(errors[i].message). Just make sure your ValidationSystem’s error objects have the field name property so you can match them to the right div class. I did this same thing last year and it worked great. Also throw some basic CSS on there - red text or borders make validation errors way easier to spot.