Javascript验证下拉菜单和文本区域

时间:2016-01-29 04:44:03

标签: javascript forms checkbox

我要设置Javascript以验证所需的表单字段。如果缺少表单字段,则会在用户屏幕上显示弹出窗口。我已经能够解决大部分问题,但问题出在复选框上。如果用户未单击复选框,则会收到错误消息。我编写代码的方式,如果用户检查“星期一”表单被处理,但如果他们检查除星期一以外的任何其他日子,那么他们仍会收到错误消息,有什么想法吗?

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>

2 个答案:

答案 0 :(得分:1)

多个元素不应该具有相同的id。对于您的复选框,您将要使用name属性。请注意,您还应该为value属性提供字符串,否则在提交表单时不会提交任何内容。

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

然后在验证函数中使用以下方法获取所有复选框元素:

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

确保检查其中一个。

答案 1 :(得分:0)

首先,正如@Riaz所指出的,你有多个具有相同ID的元素,这是错误的。将其更改为name

其次,你在复选框上缺少价值。为它们分配正确的值。

第三,(userName == "" || userPhone == "" || checkBoxCheck == "")这种情况对于任何一种情况都会返回。尝试拆分为不同的if

以下是验证复选框值的演示:

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>