Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Let’s look at the HTML first: is a temporary URL that would point to something real on a server someplace (where you have backup server-side validation of course).Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Beneath that there is a paragraph that shows or hides itself based on an error state.
The to the input box ('email'), to the associated checkbox ('valid_email) and to the DIV where the feedback text is to appear ('rsp_email').
These elements can then be referenced in the XML file that is returned by the Ajax call.
The 'empty comment" in the DIV is just a place-holder - required in some older browsers when a DIV is empty, but needs later to be referenced by a script.
This will render a simple list of errors on top of the form.
Also note we fire the validation on submit rather than as every field is modified.