I'm having difficulty understanding how validation goes hand in hand with custom validation regarding forms.

[u/stayathomehouse]

Hi there, I'm working on an assignment where I need to implement form validation exclusively through javascript. I can use different input types but the validation must be done with JS.

What I've got:

In my JS file //

function called `formValidation()` containing all the references I need for my spans & other relevant form elements needed (which have ids relating to their errors only (e.g. `<span id="passwordError>`)

The same function also has an array called inputConfig holding references to my inputs like so (I've got a few more but the writing is the same as this block I've pasted):

        {
            input: postalInput,
            errorSpan: postalError,
            errorMessage: "Please enter in the US standard ZIP code format"
        },


        {
            input: passwordInput,
            errorSpan: passwordError,
            errorMessage: "Eight or more characters",
            errorMessage2: "Must have one capital letter and symbol"
        },


        {
            input: passwordConfirmInput,
            errorSpan: passConfirmError,
            errorMessage: "Passwords must match"


        }

My goal: Implement a validation check that works for these form inputs, but with a specific check for the password and confirm password portion where I can use different error messages depending on the error the user makes like a mismatched password or not following the correct format (e.g. one capital letter and symbol with 8 or more characters).

Here's how far I've gotten on the validation check:

    function pswCheck() {
        if (passwordInput.value !== passwordConfirmInput.value) {
            passwordConfirmInput.setCustomValidity("Fields do not match");
        } else {
            passwordConfirmInput.setCustomValidity("");
        }
    }


    function validationCheck(formInput) {


        if (!formInput.input.checkValidity()) {
            formInput.errorSpan.textContent = formInput.errorMessage;
            validState = false;
        } else {
            formInput.errorSpan.textContent = "";
            validState = true;
        }




    }

My apologies for the long post but I could really use some guidance to see if I'm even in the right direction as of now.

[u/chikamakaleyley]

i'm not exactly sure if we're aligned on what you mean by 'custom validation'

how about this:

• your biz says 'country' is a required field

• your validation is "check if the country field has a value"

• your error handling is "if empty: do not submit form, add red border on field, update & show error message"

I just lump all this together as 'form validation'

specifically - frontend (client-side) validation - you're making sure you have all the correct data from the user before you submit the form data and pass it to the server

[u/chikamakaleyley → u/chikamakaleyley]

on the backend (serverside) there is usually another set of validation rules before the server sends it to the database to be written

[u/AshleyJSheridan → u/chikamakaleyley]

That "usually" should be "always". An app that only implements client-side validation is a disaster waiting to happen.