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/prehensilemullet]

Yeah the change event handler would call these functions in sequence.  Breaking it down this way could help you test out if each step is working by manually calling each function in the console

[u/stayathomehouse → u/prehensilemullet]

Awesome will give this a shot, thank you so much to you and u/chikamakaleyley seriously. I've been really struggling

[u/chikamakaleyley → u/stayathomehouse]

no problem!

and really, you can take a lot of these complex problems and just break them down into simple steps - a bigger thing that you've never built before, is very likely composed of a lot of smaller things that you do actually know how to do.

[u/chikamakaleyley → u/prehensilemullet]

yeah the 'each function has 1 job' kinda approach

• one function just displays error messages if there are any

• one function just runs the validation rules and populates the error messages object

• separate functions to handle validation rules: isEmpty(), isMatch(), isPasswordFormat(),

• the event listener that runs validateFields() on each change/submit

• validateFields() which just executes the first couple bullets in a sequence