How to force an HTML form to validate without submitting it via jQuery

javascript

validation

form-validation

jquery

byAnton Shumikhin·Feb 17, 2025

Jump into the HTML5 validation pool without executing a submission dive using jQuery's checkValidity():

$('#validateBtn').click(function() {
  if ($('form')[0].checkValidity()) {
    alert('Form is valid! Feel the validation victory vibes!');
  } else {
    // Engaging browser's in-built validation smackdown
    $('form')[0].reportValidity();
  }
});

Just boop the #validateBtn! checkValidity() inspects, reportValidity() dishes out the red cards.

One step further: Alternate validation tricks

Expanding our toolkit, let's explore fine-tuning validations and preventing unwanted submissions.

A single field scope

For individual field validation, check out this nifty:

$('#myField').on('input', function() {
  if (this.checkValidity()) {
    $(this).addClass('valid');  // Self-five! You're valid!
  } else {
    $(this).addClass('invalid');  // Sorry, try again buddy.
  }
});

Field-by-field, we're adding classes for styling according to the validation results.

Stop! Don't submit that!

Prevent a form from being torch relayed over to the server unless it's valid:

$('form').on('submit', function(event) {
  if (!this.checkValidity()) {
    event.preventDefault();  // "Stop right there, criminal scum!"
    this.reportValidity();  // "Your stolen validation is now forfeit!"
  } else {
    // AJAX, we're good to go
    var formData = $(this).serialize();
    sendDataToServer(formData);  // "Express delivery to server!"
  }
});

The event.preventDefault() is playing the form cop here, keeping an eye on submissions.

AJAX: The validation fan club

For AJAX afficionados, validate before punching that data ticket to the server:

function sendDataToServer(data) {
  $.ajax({
    url: 'submit_form.php',
    method: 'POST',
    data: data,
    success: function(response) {
      // The victory parade code goes here
    },
    error: function() {
      // Your humble pie code goes here
    }
  });
}

Free validation parking before an AJAX trip keeps the data woes away.

HTML5 validation to the max

HTML5 validation is like an easter egg basket: it's got several hidden depth charges.

Customizing error fireworks

Set your custom validation error messages with setCustomValidity() method:

document.querySelector('#myField').oninvalid = function(event) {
  event.target.setCustomValidity('Invalid entry! Your keyboard must be drunk.');
};

The validity toggle switch

Keep control of validation states at any point in your form fields:

$('form').on('input change', function() {
  var isValid = this.checkValidity();
  // The 'Submit' button is tied to the form's validation state. Neat, huh?
  $('#submitBtn').prop('disabled', !isValid);
});

Your 'Submit' button chess move is linked to form validation. Checkmate, form errors!

The browser compatibility rain dance

Don't forget the browser compatibility boogie. When HTML5 validation does the no-show, you'll need a fallback strategy or some polyfills to keep the party going.