Triggering native validation messages with JavaScript
Avoid immediate invalid states when input constraints are present. Validation messages should appear on form submission or after user interaction. Achieve this by dynamically adding constraint attributes with JavaScript.
Applying constraints on submit
This example demonstrates applying required constraints and validating a form on submission. Note how it handles conditionally rendered fields.
<script>
function initMyForm() {
return {
validate(event) {
// Add required attribute to fields
this.$refs.amount.required = true;
this.$refs.currency && (this.$refs.currency.required = true);
// Show native browser error messages for all invalid fields in the form
this.$refs.amount.form.reportValidity();
// Prevent form submission if any field is invalid
if (!this.$refs.amount.form.checkValidity()) {
event.preventDefault();
}
}
}
}
</script>
<form x-data="initMyForm()" action="" method="post"
@submit="validate($event)"
>
<input type="number"
name="amount"
x-ref="amount"
class="form-input p-2 invalid:ring-2 invalid:ring-red-500"
>
<?php if ($block->isCurrencyChooserEnabled()): ?>
<select name="currency"
x-ref="currency"
class="form-select mb-4 invalid:ring-2 invalid:ring-red-500"
>
<?= $escaper->escapeHtml(__('Choose an Amount...')) ?>
<?php /** @noEscape */ $block->getCurrencyChooserOptionsHtml(); ?>
<?php endif; ?>
</select>
</form>
Applying constraints on user interaction
This approach dynamically applies the required attribute based on input value length. An empty field will initially be considered valid until a value is entered and then removed.
<input name="amount"
x-ref="amount"
:required="$refs.amount.value.length > 0"
class="form-input p-2 invalid:ring-2 invalid:ring-red-500"
>
Alternatively, use @input or @focus event listeners to dynamically toggle other constraint attributes (e.g., min, max).
<input name="amount"
@input="$event.target.min='3'"
class="form-input p-2 invalid:ring-2 invalid:ring-red-500"
>
Custom error messages
For custom validation logic, use setCustomValidity(message) to display a specific error message. To clear the error and mark the field as valid, call setCustomValidity('') with an empty string.
<script>
function initMyForm() {
return {
validateField() {
// some code calculating the value of m ...
return m > 0
? `You have to wait ${m} minutes before you can continue.`
: '';
}
}
}
</script>
<input name="amount"
@input="$event.target.setCustomValidity(validateField())"
class="form-input p-2 invalid:ring-2 invalid:ring-red-500"
>