I'm trying to get a jQuery event to only fire once the Form is valid - not using any extensions. For example I have an email field:
<input type="email" class="form-control" id="email" placeholder="info@example.com" aria-describedby="emailHelp" name="email" maxlength="250" required>
Inside a Form. Once the submit button is clicked, this event fires:
$("#submitForm").click(function() {
$("#spinnerSubmit").removeAttr('hidden');
});
But if the user does not put an correct email in the right format, the event fires but the Form still waits for an email input. Can i somehow check if the form is validated browser-sided, without using any overkill extensions? Or is my only option this?
Most existing answers, especially tagged jquery will point you to jquery validation.
HTML5 includes some form validation, see: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation#constraint_validation_process
In summary (of that page), you can call checkValidity on a DOM element or form, eg:
document.getElementById("myForm").checkValidity();
Here's an example (jquery just used for events/UI):
$("#submitForm").click(function() {
var isValid = document.getElementById("myForm").checkValidity();
$("p").text(isValid);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<input type="email" class="form-control" id="email" placeholder="info@example.com" aria-describedby="emailHelp" name="email" maxlength="250" required>
</form>
<button type='button' id='submitForm'>click me</button>
<p>waiting for click</p>You could also use $("#myForm")[0].checkValidity() but left that out of the example to save confusion over jquery/DOM and [0] or use vanilla for the UI updates.