[ANSWERED] javascript – For loop running only once while validating form

Question 1

In the html, you gave the mobilenumber input the name of mobNunber but the javascript looks for mobNumber so I fixed that. Simply checking if arr.length == num to return false during one of these incompleted inputs did not work so I made a variable that is ticked if one of the inputs was not filled in to return false after the for loop ends. I also added arr[num].style.backgroundColor = "transparent"; so if the user fails to fill in an input, the background won’t always stay as that purple-ish color even after filling out the input.

function validate() {

    let err = false;
    let arr = [];
    arr[0] = form.name ;
    arr[1] = form.mobNumber ;
    arr[2] = form.email ;
    arr[3] = form.query ;
    for (let num = 0; num < arr.length; num++){
        if (arr[num].value == ""){
        arr[num].placeholder = "This field is mandatory";
        arr[num].style.backgroundColor = "rgba(0, 0, 255, 0.1)";
        arr[num].classList.add('redPlaceholder');
                err = true;

        }
        else{
         arr[num].style.backgroundColor = "transparent";
        }
    }
        if (err){
        return false;
        }
    console.log(arr[1] + "test")
}

.redPlaceholder::placeholder {
    color: red;
    font-style: italic;
    font-family: 'Roboto' sans-serif;
}

<form name="form" method="post" netlify id="form"  onsubmit="return validate()" >
<input type="text" name="name" placeholder="Name"><br>
<input type="email" name="email" placeholder="E-mail"><br>
<input type="number" name="mobNumber" placeholder="Contact Number"><br>
<textarea name="query" placeholder="Your Query" rows="5"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

Edit: Instead of making a variable, can simply add event to the function when it is called. onsubmit="return validate(event)" and use e to represnt that when the function actually runs function validate(e) and if the for loop detects that one of the values is equal to zero, you can use the function e.preventDefault() to stop the form from submitting. Example here: https://jsfiddle.net/nukeboy212/vskt8epj/2/.

Question 2

I would utilize preventDefault which will stop the form from submitting, allowing you to run what you need to and then telling the form to submit when you are actually ready.

Taken from this answer.

function validate(e) {
  e.preventDefault();

  // Form stuff here
}

And update your form submit to:

<form name="form" method="post" netlify id="form" onsubmit="return validate(event)" >

Question 3

I have a form and I am doing some form validation using JavaScript.

function validate() {
    let arr = [];
    arr[0] = form.name ;
    arr[1] = form.mobNumber ;
    arr[2] = form.email ;
    arr[3] = form.query ;
    for (let num = 0; num < arr.length; num++){
        if (arr[num].value == ""){
        arr[num].placeholder = "This field is mandatory";
        arr[num].style.backgroundColor = "rgba(0, 0, 255, 0.1)";
        arr[num].classList.add('redPlaceholder');
        return false;
        }
    }
}

.redPlaceholder::placeholder {
    color: red;
    font-style: italic;
    font-family: 'Roboto' sans-serif;
}

<form name="form" method="post" netlify id="form"  onsubmit="return validate()" >
<input type="text" name="name" placeholder="Name"><br>
<input type="email" name="email" placeholder="E-mail"><br>
<input type="number" name="mobNunber" placeholder="Contact Number"><br>
<textarea name="query" placeholder="Your Query" rows="5"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>

In the js part, I have an empty array and later add input fields of the form by accessing them through their name.
In the for loop I am checking if each of the input field is filled or not. If not, then I have some code to execute.That code block is running perfectly.

The problem is that when I click submit button with all fields empty, the code in the for loop runs only once – for the first input field. I think that there is some problem with the loop though I have checked the syntax several times.

Bollate

[ANSWERED] javascript – For loop running only once while validating form

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by John Gordon

Comment posted by Praneet Dixit

Comment posted by John Gordon

Comment posted by iAmOren

Comment posted by SirSpeciam

Comment posted by SirSpeciam

Comment posted by stackoverflow.com/a/4476994/779600

Comment posted by stackoverflow.com/questions/22363838/…

By

Related Post

[ANSWERED] html – Trying to align a div to the right using CSS

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] html – select all elements within a parent class

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate