JS->Form validation on inputs. Using for loop to get all the inputs index

Question

I have a form with 4 inputs and I want to show an alert on submit. What I have done is that I have already created the warnings that goes under every input with display:none; in CSS.

After this I have created a for loop in JS to get the index of every input and apply my if statement of showing the the alert if === null || === "" using a variable to make the querySelector("THE CLASS").style.display="block";

Also on my form I have this line

<form method="post" class="q-form" name="form" onsubmit="return validate()">

My problem is when I submit my form the only alert that is shown is the one under the Username and after it appears it also disappears because I think that the for loop goes to the next input.

Let me know if there is something more to clarify.

Here you have all the code: https://jsbin.com/kazopahuga/1/edit?html,js,output

If you want to see the alert showing press Run with JS

Thank You!

Please post the relevant snippets of code here, not just as a link to jsbin.com. — Barmar
– Barmar, Commented Jul 6, 2016 at 21:06

Slippery Pete · Accepted Answer · 2016-07-06 20:59:06Z

1

I suggest a few modifications to your validare() function:

Add a flag indicating whether the whole form is valid, assume it's true until you find an input that is invalid. Return the value of this flag.

var isValid = true;

Capture your validation messages too so you can access them by index like your inputs:

messages = document.getElementsByClassName(' alert alert-danger custom');

When you find an invalid input, display the associated message and update the valid flag to false.

if (currentInputValue == null || currentInputValue === "") {
    messages[index].style.display = "block";
    isValid = false;
}

Here is the updated function:

function validare() {

    var inputs, messages, index;
    var isValid = true;

    inputs = document.getElementsByTagName('input');
    messages = document.getElementsByClassName(' alert alert-danger custom');

    for (index = 0; index < inputs.length; ++index) {
        var currentInputValue = inputs[index].value;
        if (currentInputValue == null || currentInputValue === "") {
            messages[index].style.display = "block";
            isValid = false;
        }
    }

    return isValid;
}

Updated jsbin here

answered Jul 6, 2016 at 20:59

Slippery Pete

3,1101 gold badge16 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Over a year ago

I have used your version of the function and I added a small else to hide my alerts if the conditions are not met.

Shlomi Haver · Accepted Answer · 2016-07-06 20:49:17Z

1

Here is an updated solution: jsbin

You used querySelector which return only the first element it finds with the same class, you should have used querySelectorAll which return all the selectors.

answered Jul 6, 2016 at 20:49

Shlomi Haver

9749 silver badges14 bronze badges

1 Comment

Daniel Over a year ago

Ok. I have implemented you changes and I can see how this is working. Also I have change the onsubmit to onchange in order to keep the alerts showing. They don`t disappear after I input a valid value.

Collectives™ on Stack Overflow

JS->Form validation on inputs. Using for loop to get all the inputs index

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related