Question

我有一个模式允许用户通过填写一个可以输入燃料添加量的表格来“加油”，但是最大燃料量是180升，所以如果现有燃料是170升（现有的话）将从数据库中检索燃料值），并且用户尝试添加20升，它应该产生错误。我已经有了一些代码，但它没有产生错误。如果有人能指出这个问题，将不胜感激。

$(document).ready(function() {

  $('#fuel').blur(function() {
    if (!ValidateFuel()) {
      e.preventDefault();
    }
  });

  $('#auth_form8').on('submit', function(e) {
    if (!ValidateFuel()) {
      e.preventDefault();
    }
  });
});

function ValidateFuel() {
  var IsValid = false;
  var fuel_to_add = $('#fuel').val();
  var current_fuel = '100'; // this value will be retrieved from database
  var fuel_once_added = Number(current_fuel) + Number(fuel_to_add);

  if (fuel_once_added > 180) {
    $('#alertInvalidFuel').show();
    IsValid = false;
  } else {
    $('#alertInvalidFuel').hide();
    IsValid = true;
  }

  return IsValid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn btn-success" role="button" data-target="#confirm-refuelG-EEGU" data-toggle="modal"><em class='fa fa-plus'></em></a>

<div id="confirm-refuelG-EEGU" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Fuel G-EEGU</h4>
      </div>
      <div class="modal-body">
        <form name="auth_form8" id="auth_form8" method="post" action="action_refuel.php">
          <p>This action cannot be undone.</p>
          <hr>
          <input class="form-control" id="aircraft_id" name="aircraft_id" value='1' type="hidden">
          <div class="form-group" name="fuel" id="fuel">
            <label for="auth_code8" class="control-label">
                  Fuel to add:</label>
            <input class="form-control" id="fuel" name="fuel" type="number" required>
          </div>
          <div style="display:none;" class="alert alert-danger" id="alertInvalidFuel">
            <p>Fuel will exceed 180 litres.</p>
          </div>
          <hr>
          <div class="form-group has-feedback" name="auth_code8" id="auth_code8">
            <label for="auth_code8" class="control-label">
                  Authorisation Code</label>
            <input class="form-control" id="auth_code_input8" autocomplete="new-password" name="refuel_auth_code" type="password" required>
            <span class="form-control-feedback glyphicon" id="iconBad8"></span>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" id="submit" class="btn btn-success">Add Fuel</button>
      </div>
      </form>
    </div>
  </div>
</div>

JSFiddle Demo

Answer 1

问题在于：

<div class="form-group" name="fuel" id="fuel">
    <label for="auth_code8" class="control-label">Fuel to add:</label>
    <input class="form-control" id="fuel" name="fuel" type="number" required>
</div>

您的div有id="fuel"，input也是如此。从id中移除div或将其设为唯一。此外，div元素没有名称属性，您也应该删除它。

JavaScript - 获取用户输入并在计算中使用以验证值

1 个答案: