I want an alert message to display when I filled out all input entries correctly on my validation form

Code Feedback
1

Yet my Alert messagee isn’t displaying when I fill out all of those entries.

Here is the piece of code thats SUPPOSED to make that work:

if(setSuccessFor(username)&&setSuccessFor(email)&&setSuccessFor(password)&&setSuccessFor(confirmPassword)){
alert(“You filled out all input entries correctly”)
}

image
image888×854 19.8 KB

Here is the link to the rest of my code

2

Your setSuccessFor() function should return a boolean like true

3

The setSuccessFor function does not have any validation logic, it is doing DOM manipulation. It doesn’t make sense to try and use it like you are.

4

So all setSuccessFor functions should be equated to true?

5

So should I use the setSuccessFor function at all? What do you think?

6

I would suggest you to create a function that checks if the input has the success class.
Check out the contains() method in this page:
https://www.w3schools.com/jsref/prop_element_classlist.asp

1 Like
7

Well you can’t use it to check for any condition like you are now, it just does DOM manipulation. I would keep functions small and as specific to one task as possible (separation of concerns).

There are many ways you can do it.

Considering you already have all the logic inside the checkInputs function one option is to make the submit (or alert in this case) the default for the function. If you add a return after each call to setErrorFor it will validate each input separately, if it gets to the end of the function you call submit/alert. As all other conditions are handled before the end of the function the last thing to happen in the function will be the default (i.e. the submit/alert).

8

So whats wrong with this piece of code? if(usernameValue.classList.contains(“success”)&&emailValue.classList.contains(“success”)&&passwordValue.classList.contains(“success”)&&confirmpasswordValue.classList(“success”)){
alert(“GODD!”)

}

9

  1. You are looking at the values, not the elements. The values do not have a class on them.

  2. The success class is on the inputs containing parent element div.

10

The parent element div in this case would be the div containing the form-control class right?

11

So I should have theoretically four returns in each block that contains the setErrorFor method? Would I be returning false? The alert message box should go at the end of my four if/else statements

12

Yes. Did you not write the code?

The function setSuccessFor is setting the class on the element, so that is the element with the class.

Yes, one return after each call to setErrorFor and you just return you don’t need a return value.

13

How do I make this code run php upon submitting when js dom finishes validating it?