JS Issue with form validation on drop down input

Question

Having an odd issue where my javascript doesn't fire off correctly on a drop down item when the field is empty (when it should) and then cancels further items after it from being validated all together. When I pop open the browser console, there error I get is "Uncaught TypeError: Cannot read property 'value' of undefined" and it leads directly to the end of the "if" statement in my code. Unsure where I'm going wrong here, I have several identical lines of JS for number and text input fields that work fine, but this one is causing me grief.

There's quite a bit too it, but here's the HTML for that specific part:

<div id="countryRow" class="col-xl-6 justify-content-xl-center">
                            <form name="countryForm" onsubmit="return validateCountry()" method="post">
                                <h5>&nbsp;</h5>
                                <input type="text" list="Ctry" name="selectCountry" style="width:550px;" value=""> 
                                    <datalist id="Ctry">
                                        <option value="United States">
                                            <option value="Canada">
                                        </datalist>
                                <h5>Country</h5>
                                </form>
                        </div>

and here is the Javascript:

function validateCountry() {
    valid = true;
    if (document.countryForm.countryInput.value == "") {
      shipMessage.innerHTML = "This field is required";
      document.getElementById("countryRow").style.backgroundColor = "#fff7f7"
      valid = false;
    }
    return valid;
  }

You mistyped the name of the form input: countryInput should be selectCountry — Barmar
– Barmar, Commented Mar 16, 2020 at 20:54
It's always those little details we miss, isn't it? Thank you for the catch! — JAY-ARE-GEE
– JAY-ARE-GEE, Commented Mar 16, 2020 at 21:21

Shubhaw Kumar · Accepted Answer · 2020-03-16 21:12:17Z

It's just a small mistake. You have incorrectly named your form input in the Javascript code. And the shipMessage field is not defined in this current example. In the below code I have fixed these small mistakes:

HTML

<div id="countryRow" class="col-xl-6 justify-content-xl-center">
  <form name="countryForm" onsubmit="return validateCountry()" method="post">
    <h5>&nbsp;</h5>
    <input type="text" list="Ctry" name="selectCountry" style="width:550px;" value="">
    <datalist id="Ctry">
      <option value="United States">
      <option value="Canada">
    </datalist>
    <p id="shipMessage"></p> <!-- Added this shipMessage p element to show the error -->
    <h5>Country</h5>
    <button type="submit">Submit</button>
  </form>
</div>

Javascript:

function validateCountry() {
  valid = true;
// since the name of the field is "selectCountry", so I have replaced "countryInput" with "selectCountry"
  if (document.countryForm.selectCountry.value == "") {
    const shipMessage = document.getElementById("shipMessage"); // defining the shipMessage variable
    shipMessage.innerHTML = "This field is required";
    document.getElementById("countryRow").style.backgroundColor = "#fff7f7";
    valid = false;
  }
  return valid;
}

Collectives™ on Stack Overflow

JS Issue with form validation on drop down input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related