Question

我一直在寻找解决方案，但我无法弄清楚我的代码会出现什么问题。每个文本输入都使用我的累加器变量正确计算，但是我的复选框和我的下拉菜单都没有。

我无法点击提交，直到所有错误== 0，但我的最后三个是接受（复选框）和两个下拉（状态和产品）都没有被累加器计数。在控制台中，它们是真实的，但也是（作为一个数组），但它们没有被计算，因为我的错误消息仍然显示它们。任何帮助？

<form action="#" method="post" name="order" id="order">
<fieldset>
<legend>Personal Information</legend>
<ul>
  <li><label for="firstname">First Name:</label>
  <input type="text" maxlength="20" id="first"><span class="1"></span></li>
  <li><label for="lastname">Last Name:</label>
  <input type="text" maxlength="20" id="last"><span class="2"></span></li>
  <li><label for="address">Address:</label>
  <input type="text" maxlength="40" id="address"><span class="3"></span>
</li>
<li><label for="city">City:</label>
<input type="text" maxlength="30" id="city"><span class="4"></span></li>
<li><label for="state">State:</label>
<select name="states" id="states">
<option value="selectstate">--Select a State--</option>
<option value="WA">Washington</option>
<option value="OR">Oregon</option>
<option value="MT">Montana</option>
<option value="CA">California</option>
<option value="ID">Idaho</option>
</select><span class="5"></span></li>
<li><label for="product" id="product">Product:</label>
<select name="products" id="products">
<option value="selectproduct">--Select a Product--</option>
<option value="OR">Watch</option>
<option value="MT">Hats</option>
<option value="CA">Sunglasses</option>
<option value="ID">Shoes</option>
<option value="ID">Jewelry</option>
</select><span class="6"></span></li>
<li><label for="quantity">Quantity:</label>
<input type="text" maxlength="5" id="quantity"><span class="7"></span></li>
<li><label for="contact">Can we contact you by phone?</label>
<input type="radio" name="contactansweryes" value="Yes" checked>Yes
<input type="radio" name="contactanswerno" value="No">No <span class="8">
</span></li>
<li><label for="terms">Have you read the Terms and Conditions?</label>
<input type="checkbox" name="termsanswer[]" id="termsanswer" 
value="accept">I 
Accept <span class="9"></span>
<li><input type="submit" value="Submit"></li>
</ul>
</fieldset>
</form>

的jQuery

    $(document).ready(function(){
    // selects the first text input
    $(':text:first').focus();
    // Values of each input
    firstVal = $('#first:text');
    lastVal = $('#last:text');
    addressVal = $('#address:text');
    cityVal = $('#city:text');
    stateVal = $('#states option:selected');
    productVal = $('#products option:selected');
    quantityVal = $('#quantity:text');
    contactVal = $(':radio:checked');
    termsVal = $('#termsanswer:checked');

    // console.log(stateVal[0], productVal[0]);

    $('#order').submit(function(evt) {
    var error = 0;
    $('#blankfields').text("");
    if ($(firstVal).val() == "") {
      $('#blankfields').append('<li>Please fill out first name!</li>');
      error++;
    }
    if ($(lastVal).val() == "") {
      $('#blankfields').append('<li>Please fill out last name!</li>');
            error++;
    }
    if ($(addressVal).val() == "") {
      $('#blankfields').append("<li>Please fill out address</li>");
            error++;
    }
    if ($(cityVal).val() == "") {
      $('#blankfields').append("<li>Please enter in City</li>");
            error++;
    }
    if ($(stateVal).text() == '--Select a State--') {
      $('#blankfields').append("<li>Please select a State</li>");
            error++;
            console.log(stateVal)
    }
    if ($(productVal).text() == '--Select a Product--') {
      $('#blankfields').append("<li>Please select a Product</li>");
            error++;
    }
    if ($(quantityVal).val() == "") {
      $('#blankfields').append("<li>Please select a Quantity</li>");
            error++;
    }
    if ($(contactVal).length == 0) {
      $('#blankfields').append("<li>Please select Yes or No to Contact</li>");
            error++;
    }
    if ($(termsVal).length == 0) {
      $('#blankfields').append("<li>Please check Accept</li>");
            error++;
    }
    console.log(error);
    if (error === 0) {
      return true;
    } else {
    return false;
    }
    }); // end of submit
    }); // end document ready

Answer 1

您需要验证您的无线电，选择，在提交事件中复选框而不是ready()，并使用名称分组作为无线电元素，如

<input type="radio" name="contactanswer" value="Yes" checked>Yes
<input type="radio" name="contactanswer" value="No">No <span class="8">

在JS中使用像，

 contactVal = $('[name="contactanswer"]:checked');

代码段，

＆＃13;

$(document).ready(function() {
  // selects the first text input
  $(':text:first').focus();
  // Values of each input
  firstVal = $('#first:text');
  lastVal = $('#last:text');
  addressVal = $('#address:text');
  cityVal = $('#city:text');
  stateVal = $('#states');
  productVal = $('#products');
  quantityVal = $('#quantity:text');


  // console.log(stateVal[0], productVal[0]);

  $('#order').submit(function(evt) {
    contactVal = $('[name="contactanswer"]:checked');
    termsVal = $('#termsanswer:checked');
    var error = 0;
    $('#blankfields').text("");
    if ($(firstVal).val() == "") {
      $('#blankfields').append('<li>Please fill out first name!</li>');
      error++;
    }
    if ($(lastVal).val() == "") {
      $('#blankfields').append('<li>Please fill out last name!</li>');
      error++;
    }
    if ($(addressVal).val() == "") {
      $('#blankfields').append("<li>Please fill out address</li>");
      error++;
    }
    if ($(cityVal).val() == "") {
      $('#blankfields').append("<li>Please enter in City</li>");
      error++;
    }
    if ($(stateVal).val() == 'selectstate') {
      $('#blankfields').append("<li>Please select a State</li>");
      error++;
    }
    if ($(productVal).val() == 'selectproduct') {
      $('#blankfields').append("<li>Please select a Product</li>");
      error++;
    }
    if ($(quantityVal).val() == "") {
      $('#blankfields').append("<li>Please select a Quantity</li>");
      error++;
    }
    if ($(contactVal).length == 0) {
      $('#blankfields').append("<li>Please select Yes or No to Contact</li>");
      error++;
    }
    if ($(termsVal).length == 0) {
      $('#blankfields').append("<li>Please check Accept</li>");
      error++;
    }
    console.log(error);
    if (error === 0) {
      return true;
    } else {
      return false;
    }
  }); // end of submit
}); // end document ready

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#" method="post" name="order" id="order">
  <fieldset>
    <legend>Personal Information</legend>
    <ul>
      <li><label for="firstname">First Name:</label>
        <input type="text" maxlength="20" id="first"><span class="1"></span></li>
      <li><label for="lastname">Last Name:</label>
        <input type="text" maxlength="20" id="last"><span class="2"></span></li>
      <li><label for="address">Address:</label>
        <input type="text" maxlength="40" id="address"><span class="3"></span>
      </li>
      <li><label for="city">City:</label>
        <input type="text" maxlength="30" id="city"><span class="4"></span></li>
      <li><label for="state">State:</label>
        <select name="states" id="states">
<option value="selectstate">--Select a State--</option>
<option value="WA">Washington</option>
<option value="OR">Oregon</option>
<option value="MT">Montana</option>
<option value="CA">California</option>
<option value="ID">Idaho</option>
</select><span class="5"></span></li>
      <li><label for="product" id="product">Product:</label>
        <select name="products" id="products">
<option value="selectproduct">--Select a Product--</option>
<option value="OR">Watch</option>
<option value="MT">Hats</option>
<option value="CA">Sunglasses</option>
<option value="ID">Shoes</option>
<option value="ID">Jewelry</option>
</select><span class="6"></span></li>
      <li><label for="quantity">Quantity:</label>
        <input type="text" maxlength="5" id="quantity"><span class="7"></span></li>
      <li><label for="contact">Can we contact you by phone?</label>
        <input type="radio" name="contactanswer" value="Yes" checked>Yes
        <input type="radio" name="contactanswer" value="No">No <span class="8">
</span></li>
      <li><label for="terms">Have you read the Terms and Conditions?</label>
        <input type="checkbox" name="termsanswer[]" id="termsanswer" value="accept">I Accept <span class="9"></span>
        <li><input type="submit" value="Submit"></li>
    </ul>
  </fieldset>
</form>
<div id="blankfields"></div>

＆＃13;

尝试获取复选框，选择选项值。不添加值以删除错误

1 个答案: