Javascript Validation of dropdown menu and text area

Question

I am to set up Javascript to validate required form fields. If a form field is missing a pop-up will come up on users screen. I have been able to figure most of it out however the problem is with the check-box. If the user does not click a check-box they are to get an error message. The way I have my code written, if the user checks "monday" the form is processed, but if they check any other days except monday then they will still get the error message, any thoughts?

function checked() {
  var userName = document.getElementById("text").value;
  var userPhone = document.getElementById("phone").value;
  var checkBoxCheck = document.getElementById("checkers").checked;
  var otherOne = document.getElementById("dropdown").value;
  var addInfo = document.getElementById("textarea").value;
  if (userName == "" || userPhone == "" || checkBoxCheck == "") {
    alert("Please fill in: name, phone number, days of week.");
    if (otherOne == "Other") {
      if (addInfo == "") {
        alert("Please fill in your additional information.");
      }
    }
    return false;
  } else {
    return true;
  }
}

<body>
  <div class="container-fluid">
    <div class="page-header">
      <table border="1" width="100%" Frame="below">
        <thead>
          <h1 style="color:purple" align="center"><span>C</span>aFe 80's</h1>
        </thead>
      </table>
    </div>
    <table border="0" width="20%" cellspacing="20">
      <ul class="list-inline nav nav-tabs">
        <li><a href="Lab-9CSSHomePageV6.html"><span class="glyphicon glyphicon-home"></span></a>
        </li>
        <li><a href="Lab-9CSSMenuPageV6.html">Menu</a>
        </li>
        <li class="active"><a href="Lab-9CSSContactPageV6.html">Contact Us</a>
        </li>
      </ul>
    </table>
  </div>
  <div class="container" style="height: 700px; position: relative; top: 60px">
    <form onsubmit="return checked()" action="lab-9CSSContactPageV6.html" method="POST">
      <div class="form-group">
        <label for="text">Name:</label>
        <input type="text" class="form-control" id="text">
      </div>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="form-group">
        <label for="phone">Phone Number:</label>
        <input type="phone" class="form-control" id="phone">
      </div>
      <div class="form-group">
        <label for="dropdown">Reason for Inquiry:</label>
        <select class="form-control" id="dropdown">
          <option>Catering</option>
          <option>Private Party</option>
          <option>Feedback</option>
          <option id="oOther">Other</option>
        </select>
      </div>
      <div class="form-group">
        <label for="textarea">Addition Imformation:</label>
        <textarea class="form-control" rows="5" id="textarea"></textarea>
      </div>
      <div class="form-group" style="position:relative; right: 40px">
        <div class="radio-inline">
          <label class="radio-inline">Have you been to the restaurant?</label>
          <label class="radio-inline">
            <input type="radio" name="rad" checked>No</label>
          <label class="radio-inline">
            <input type="radio" name="rad">Yes</label>
        </div>
      </div>
      <div class="form-group" style="position:relative; right: 40px">
        <div class="checkbox-inline">
          <label class="checkbox-inline">Best days to contact you:</label>
          <label class="checkbox-inline">
            <input id="checkers" type="checkbox" value="">M</label>
          <label class="checkbox-inline">
            <input id="checkers" type="checkbox" value="">T</label>
          <label class="checkbox-inline">
            <input id="checkers" type="checkbox" value="">W</label>
          <label class="checkbox-inline">
            <input id="checkers" type="checkbox" value="">TH</label>
          <label class="checkbox-inline">
            <input id="checkers" type="checkbox" value="">F</label>
        </div>
      </div>
      <div class="form-group" align="center">
        <button type="submit" class="btn btn-default">Send Request</button>
      </div>
    </form>
  </div>

Riaz · Accepted Answer · 2016-01-29 04:52:42Z

1

Multiple elements shouldn't have the same id. For your checkbox, you'll want to use the name attribute instead. Note that you should also provide a string for the value attribute, or else nothing will get submitted when you submit the form.

<input id="checkers_m" name="checkers" type="checkbox" value="M">M</input>

Then in your validation function get all of the checkbox elements using:

var checkboxes = document.getElementsByName('checkers');

And make sure one of them is checked.

edited Jan 29, 2016 at 4:52

answered Jan 29, 2016 at 4:48

Riaz

8746 silver badges15 bronze badges

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

2 Comments

Riaz Over a year ago

Good point! shawn, without a value set nothing will be submitted for this field when you submit the form.

johnster Over a year ago

Thanks guys, I made the above changes but still am having problems, if the userName and userPhone fields are filled in the form will submit even if the other required fields are empty. My guess is it has to do with the if statement.

Rajesh Dixit · Accepted Answer · 2016-01-29 05:01:54Z

First, as pointed out by @Riaz, you have more than 1 element with same ID, which is wrong. Change it to name.

Second, you are missing value on checkboxes. Assign them proper values.

Third, (userName == "" || userPhone == "" || checkBoxCheck == "") this condition will return true for either case. Try splitting to different if.

Following is a demo of how you can validate checkbox values:

function checked() {
  var userName = document.getElementById("text").value;
  var userPhone = document.getElementById("phone").value;
  var checkBoxCheck = document.getElementsByName("checkers");
  var otherOne = document.getElementById("dropdown").value;
  var addInfo = document.getElementById("textarea").value;
  
  var checkValid = false;
  
  for(var i =0; i<checkBoxCheck.length; i++){
    if(checkBoxCheck[i].checked){
      checkValid = true;
      break;
    }
  }
  
  if(!checkValid){
    alert("Please check a checkbox")
  }
  
  if (userName == "" || userPhone == "") {
    alert("Please fill in: name, phone number, days of week.");
    if (otherOne == "Other") {
      if (addInfo == "") {
        alert("Please fill in your additional information.");
      }
    }
    return false;
  } else {
    return true;
  }
}

<body>
  <div class="container-fluid">
    <div class="page-header">
      <table border="1" width="100%" Frame="below">
        <thead>
          <h1 style="color:purple" align="center"><span>C</span>aFe 80's</h1>
        </thead>
      </table>
    </div>
    <table border="0" width="20%" cellspacing="20">
      <ul class="list-inline nav nav-tabs">
        <li><a href="Lab-9CSSHomePageV6.html"><span class="glyphicon glyphicon-home"></span></a>
        </li>
        <li><a href="Lab-9CSSMenuPageV6.html">Menu</a>
        </li>
        <li class="active"><a href="Lab-9CSSContactPageV6.html">Contact Us</a>
        </li>
      </ul>
    </table>
  </div>
  <div class="container" style="height: 700px; position: relative; top: 60px">
    <form onsubmit="return checked()" action="lab-9CSSContactPageV6.html" method="POST">
      <div class="form-group">
        <label for="text">Name:</label>
        <input type="text" class="form-control" id="text">
      </div>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email">
      </div>
      <div class="form-group">
        <label for="phone">Phone Number:</label>
        <input type="phone" class="form-control" id="phone">
      </div>
      <div class="form-group">
        <label for="dropdown">Reason for Inquiry:</label>
        <select class="form-control" id="dropdown">
          <option>Catering</option>
          <option>Private Party</option>
          <option>Feedback</option>
          <option id="oOther">Other</option>
        </select>
      </div>
      <div class="form-group">
        <label for="textarea">Addition Imformation:</label>
        <textarea class="form-control" rows="5" id="textarea"></textarea>
      </div>
      <div class="form-group" style="position:relative; right: 40px">
        <div class="radio-inline">
          <label class="radio-inline">Have you been to the restaurant?</label>
          <label class="radio-inline">
            <input type="radio" name="rad" checked>No</label>
          <label class="radio-inline">
            <input type="radio" name="rad">Yes</label>
        </div>
      </div>
      <div class="form-group" style="position:relative; right: 40px">
        <div class="checkbox-inline">
          <label class="checkbox-inline">Best days to contact you:</label>
          <label class="checkbox-inline">
            <input name="checkers" type="checkbox" value="1">M</label>
          <label class="checkbox-inline">
            <input name="checkers" type="checkbox" value="2">T</label>
          <label class="checkbox-inline">
            <input name="checkers" type="checkbox" value=3"">W</label>
          <label class="checkbox-inline">
            <input name="checkers" type="checkbox" value="4">TH</label>
          <label class="checkbox-inline">
            <input name="checkers" type="checkbox" value="5">F</label>
        </div>
      </div>
      <div class="form-group" align="center">
        <button type="button" onclick="checked()" class="btn btn-default">Send Request</button>
      </div>
    </form>
  </div>

Collectives™ on Stack Overflow

Javascript Validation of dropdown menu and text area

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related