Fran Zekan:
<script>
// Custom validation function for date_of_birth
function dateOfBirthValidation(value) {
const today = new Date();
const dob = new Date(value);
let age = today.getFullYear() - dob.getFullYear();
const monthDiff = today.getMonth() - dob.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
age--;
}
return age >= 18
? { valid: true, message: "" }
: { valid: false, message: "You must be at least 18 years old." };
}
window.addEventListener("DOMContentLoaded", () => {
const field = document.querySelector('u-field[field="date_of_birth"]');
if (field) {
field.validationFunc = dateOfBirthValidation;
}
});
</script>In an example like this... if it's AFTER the html defining this u-field element, do we even need this DOMContentLoaded? (yes, we'd need it if the element was after the script tag, but if the script tag is below, do we need it?)
Raycast AI: No, if the <script> tag appears after the u-field element in the HTML, you do not need DOMContentLoaded for this specific code to work.
The browser parses HTML top‑to‑bottom:
- It encounters your
u-field[field="date_of_birth"]element and adds it to the DOM. - Later, it reaches the
<script>tag and executes it immediately. - At that moment, the earlier
u-fieldelement already exists in the DOM, so:
const field = document.querySelector('u-field[field="date_of_birth"]');will find it, and:
field.validationFunc = dateOfBirthValidation;will run successfully without needing to wait for DOMContentLoaded.
So in this case you could safely write:
<u-field field="date_of_birth"></u-field>
<script>
function dateOfBirthValidation(value) {
const today = new Date();
const dob = new Date(value);
let age = today.getFullYear() - dob.getFullYear();
const monthDiff = today.getMonth() - dob.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
age--;
}
return age >= 18
? { valid: true, message: "" }
: { valid: false, message: "You must be at least 18 years old." };
}
const field = document.querySelector('u-field[field="date_of_birth"]');
if (field) {
field.validationFunc = dateOfBirthValidation;
}
</script>You need DOMContentLoaded (or to place the script later / use defer) when:
- The script is in the
<head>or otherwise above the element in the HTML. - The element may be inserted dynamically after the script runs.
- You want to ensure the entire document is parsed before running the logic, regardless of where the element is.
For example, if your script is in <head>:
<head>
<script>
window.addEventListener("DOMContentLoaded", () => {
const field = document.querySelector('u-field[field="date_of_birth"]');
if (field) {
field.validationFunc = dateOfBirthValidation;
}
});
</script>
</head>then the listener is necessary because the u-field is not yet in the DOM when the script executes.
- Script below the
u-fieldin the HTML:DOMContentLoadedis not required for this code. - Script above the
u-field(e.g., in<head>): keepDOMContentLoaded(or usedefer/asyncwith appropriate handling).