Question

你能帮助我做到这一点，以便它不会检查HIDDEN所需的输入框是否已填满？

我有一个订单系统，有一个提货和交货单选按钮。当他们选择Pickup时，我会隐藏地址，城市，州和邮政编码的输入框。这些盒子是交付所必需的。因为它们是必需的，所以它仍会检查盒子是否被填满，即使它被隐藏了。

我这里的脚本功能可以隐藏输入框，但它不会让我前进，因为它仍在检查输入框是否已填满。

< script >
  function showFunctionDelivery() {
    var x = document.getElementById("deliveryStuff");
    var y = document.getElementById("pickupStuff");

    if (x.style.display === "none") {
      x.style.display = "block";


    } else {
      x.style.display = "block";


    }
  }

function showFunctionPickup() {
  var x = document.getElementById("deliveryStuff");
  var y = document.getElementById("pickupStuff");

  if (x.style.display === "block") {
    x.style.display = "none";



  } else {
    x.style.display = "none";


  }
} <
/script> <
script src = "assets/js/script.js" > < /script> < /
body >

<body>

  <form action="/shipping" method="POST">
    <div class="container">
      <h1>Delivery/Pick Up</h1>
      <hr>
      <input onchange="showFunctionDelivery()" type="radio" class="form-group" id="delivery" name="delivery" checked> Delivery &nbsp
      <input onchange="showFunctionPickup()" type="radio" class="form-group" id="pickup" name="delivery"> Pick Up &nbsp
      <br>
      <!---Needed for order name, date time.-->
      <div class="row" id="pickupStuff">
        <div class="col-sm-3">
          Name: ex. John Smith
          <input required type="text" pattern="\D+" id="name" class="form-control" value="" name="name">
        </div>
        <div class="col-sm-3">
          Desired Date:
          <input required type="date" id="date" class="form-control" name="date">
        </div>
        <div class="col-sm-3" id="time">
          Desired Time:
          <select class="form-control">
                        <option value="7am">7am</option>
                        <option value="8am">8am</option>
                        <option value="9am">9am</option>
                        <option value="10am">10am</option>
                        <option value="11am">11am</option>
                        <option value="12pm">12pm</option>
                        <option value="1pm">1pm</option>
                        <option value="2pm">2pm</option>
                        <option value="3pm">3pm</option>
                        <option value="4pm">4pm</option>
                    </select>
        </div>

      </div>
    </div>
    <br>
    <!--delivery stuff-->
    <div class="container" id="deliveryStuff">
      <div class="row">
        <div class="col-sm-3" id="deliveryOp">
          Address: ex. 12345 Plain Dr
          <input required type="text" id="address" pattern="\d+\s\D+" class="form-control" value="" name="address">
        </div>
        <div class="col-sm-3" id="deliveryOp">
          City: ex. Austin
          <input required type="text" id="city" pattern="\D+" class="form-control" value="" name="city">
        </div>
        <div class="col-sm-3" id="deliveryOp">
          State:
          <select required class="form-control" id="state" name="statename">
                        <option value="">Please Select One</option>
                        <option value="AK">Alaska</option>
                        <option value="AL">Alabama</option>
                        <option value="AR">Etc.</option>
                        
                    </select>
        </div>
        <div class="col-sm-3" id="deliveryOp">
          Zip Code: ex. 12345
          <input required id="zip" type="text" pattern="\d{5}" class="form-control" value="" name="zipcode">
        </div>
      </div>
    </div><br><br>

    <script>
      let d = document.getElementById("delivery"),
        p = document.getElementById("pickup");
    </script>
    <footer class="container-fluid text-center">
      <a href="/billing"><button type="submit" class="btn btn-danger">Next</button></a>
    </footer>
  </form>

</body>

Answer 1

在showFunctionPickUp()方法中将地址，城市，州和邮政编码的必需属性设置为false。

    function showFunctionPickup() {
      var x = document.getElementById("deliveryStuff");
      var y = document.getElementById("pickupStuff");
      var address = document.getElementById("address");
      var city = document.getElementById("city");
      var state = document.getElementById("state");
      var zip = document.getElementById("zip");

      x.style.display = "none";
      address.required = false;
      city.required = false;
      state.required = false;
      zip.required = false;
  }

Answer 2

您可以使用removeAttr()方法删除required属性。您可以按如下方式使用它：

$("#address").removeAttr('required');

要再次添加必填字段，请使用attr()方法

$("#address").attr('required','');

使用JavaScript

2 个答案: