Javascript Form Validation, multiple functions on a single button not working correctly

Question

I'm working on a form validation project that requires multiple input fields connected to a single submit button. I more or less figured the button out, but I'm having an issue getting the functions themselves to work properly. I currently only have three of the eleven fields typed up for testing, but what the page should do is let you know which fields are invalid when there is nothing filled out in them (changing text/background colors, message below, etc).

The issue I'm having is that when the requirements for the first field (Gift Card Number) are met, it acts as though there isn't any issues anywhere, regardless of whether or not the other input fields (First name, Last name) have been filled. They all seem to function correctly if none of the fields are filled, but my concern is that the functions seem to be firing in order and first one to work negates all the ones after (for example, Gift Card prevents First and Last, First prevents Last, etc).

Any ideas where I've gone wrong here? I'll include my html and my javascript. (Yes, I know the html is a bit ugly, I plan to move the material over to a div table later, just trying to get it to function for now) Any help appreciated as always!

HTML

<!DOCTYPE html>
<html lang="en">
    <head></head>
        <body>
            <table>
                <tbody>
                <tr id="rONE">
                <td><h4>Gift Card Amount</h4>
                    <form name="giftForm" onsubmit="return validateGiftCard()" method="post" id="GiftCardForm">
                    <input type="text" name="giftInput">

                    <h5 id="giftMessage"></h5></td>
                    <input type="submit" value="Submit" style="display:none" />
                <td></td>
                </tr>
               </form>

                <tr id="rTWO-1">
                <td><h4>Recipient's name</h4>   
                    </td>
                <td>&nbsp;</td>
                </tr>

                <tr id="rTWO-2">
                <td>
                    <form name="firstForm" onsubmit="return validateRecipient()" method="post">
                    <input type="text" name="firstInput">
                    <br>
                    <h4>First</h4>
                </form>
                </td>
                <td><form name="lastForm" method="post">
                    <input type="text" name="lastInput">
                    <br>
                    <h4>Last</h4></td>
                    </form>
                </tr>

                <tr>
                <td><h5 id="recipientMessage"></h5></td></td>
                <td>&nbsp;</td>
                </tr>

                </tbody>
                </table>

                <button type="submit" id="btn" form="GiftCardForm" value="Submit">Submit</button>
        </body>
        <footer>
            <script src="Form Validation.js"></script>
        </footer>
</html>

Javascript

document.getElementById('btn').addEventListener('click', function(){
    validateGiftCard();
    validateRecipient();
});


function validateGiftCard() {
    valid = true;
    if ( document.giftForm.giftInput.value == "" )
    {
        giftMessage.innerHTML = "This field is required";
        document.getElementById("rONE").style.backgroundColor="#fff7f7"
        valid = false;
    }
    return valid;
}


function validateRecipient() {
    valid = true;
    if ( document.firstForm.firstInput.value == "" )
    {
        recipientMessage.innerHTML = "This field is required";
        document.getElementById("rTWO-1").style.backgroundColor="#fff7f7"
        document.getElementById("rTWO-2").style.backgroundColor="#fff7f7"
        valid = false;
    }
    return valid;
}

Igor · Accepted Answer · 2020-03-16 01:11:48Z

1

document.getElementById('btn').addEventListener('click', function(e) {
  var v1 = validateGiftCard();
  var v2 = validateRecipient();
  console.log(v1, v2);
  if (!v1 || !v2)
    e.preventDefault();
});


function validateGiftCard() {
  valid = true;
  if (document.giftForm.giftInput.value == "") {
    giftMessage.innerHTML = "This field is required";
    document.getElementById("rONE").style.backgroundColor = "#fff7f7"
    valid = false;
  }
  return valid;
}


function validateRecipient() {
  valid = true;
  if (document.firstForm.firstInput.value == "") {
    recipientMessage.innerHTML = "This field is required";
    document.getElementById("rTWO-1").style.backgroundColor = "#fff7f7"
    document.getElementById("rTWO-2").style.backgroundColor = "#fff7f7"
    valid = false;
  }
  return valid;
}

<table>
  <tbody>
    <tr id="rONE">
      <td>
        <h4>Gift Card Amount</h4>
        <form name="giftForm" onsubmit="return validateGiftCard()" method="post" id="GiftCardForm">
          <input type="text" name="giftInput">

          <h5 id="giftMessage"></h5>
        </form>
      </td>
      <input type="submit" value="Submit" style="display:none" />
      <td></td>
    </tr>

    <tr id="rTWO-1">
      <td>
        <h4>Recipient's name</h4>
      </td>
      <td>&nbsp;</td>
    </tr>

    <tr id="rTWO-2">
      <td>
        <form name="firstForm" onsubmit="return validateRecipient()" method="post">
          <input type="text" name="firstInput">
          <br>
          <h4>First</h4>
        </form>
      </td>
      <td>
        <form name="lastForm" method="post">
          <input type="text" name="lastInput">
          <br>
          <h4>Last</h4>
        </form>
      </td>
    </tr>

    <tr>
      <td>
        <h5 id="recipientMessage"></h5>
      </td>
      <td>&nbsp;</td>
    </tr>

  </tbody>
</table>

<button type="submit" id="btn" form="GiftCardForm" value="Submit">Submit</button>

edited Mar 16, 2020 at 1:11

answered Mar 16, 2020 at 0:15

Igor

15.9k1 gold badge29 silver badges34 bronze badges

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

6 Comments

JAY-ARE-GEE Over a year ago

Oh I see, thank you! I'm missing the && between the two functions! Would I use '&&' if there were several more functions or is that only for two? (edit) the first one actually doesn't fire off the second function at all now. ALSO the second leaves me right back at square one, if I fill out the first item then it doesn't register the other two as incomplete.

Igor Over a year ago

More importantly :), you are missing return from the event handler.

Igor Over a year ago

And I would go for the second method - attaching functions as separate event hadlers.

JAY-ARE-GEE Over a year ago

Hmm, the third one doesn't work at all, and Visual Studio Code pops up with a few errors are typing it in for which it has no suggestions for fixes.

Igor Over a year ago

The third was missing ); at the end.

|

Collectives™ on Stack Overflow

Javascript Form Validation, multiple functions on a single button not working correctly

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related