When you need to enforce rules that go beyond what HTML5 or built-in JavaScript validation can provide, you write your own custom validation functions. These functions let you define any logic you want—for example, making sure two password fields match, checking if a username is unique, or validating complex relationships between fields. Writing custom validation functions gives you full control over how and when your form data is checked before submission.

To understand how this custom validation works, start by defining a function—passwordsMatch—that takes two arguments: the values of the password and confirm password fields. It returns true if both values are exactly the same, and false otherwise.

Next, inside your form's submit event handler, you grab the current values from both password fields. You then call your custom function with these values. If the function returns false, you use event.preventDefault() to stop the form from submitting, and display an alert to inform the user. By plugging your custom function into the submit handler, you ensure that your rule is always checked right before the form tries to send data. This approach works for any validation rule you need—just write a function that returns true or false, and call it with the relevant values during form submission.