JavaScript - 获取用户输入并用于计算以验证值

我有一种模式，允许用户通过填写表格填写表格，在表格中输入要添加的燃油量，但最大燃油量为180升，所以如果现有的燃料是170升（现有的燃料价值将从数据库中检索），并且用户试图增加20升，则应该产生错误。我已经有了一些代码，但它不会产生错误。如果有人能指出这个问题，将不胜感激。JavaScript - 获取用户输入并用于计算以验证值

$(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

来源

2017-03-06 sinesine

'e'未定义。它应该是'$（'＃fuel'）。blur（function（e）{！ValidateFuel（））{e.preventDefault（）; } }）;'。使用[浏览器控制台（开发工具）]（http://webmasters.stackexchange.com/q/8525）（点击'F12'）并读取任何错误。使用[JSHint]（http://jshint.com/）立即查找代码问题。 – Xufox

@Xufox不幸的是，这并不能解决问题。在JSHint或控制台上没有显示错误。我认为这只是不触发验证功能？ – sinesine

@Xufox说了什么，而且你的html格式不好。 –

的问题是在这里：

<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。从div中删除id或使其唯一。此外，div元素没有名称属性，您也应该删除它。

来源

2017-03-06 18:41:45 billyonecan

谢谢，这解决了它。 – sinesine

JavaScript - 获取用户输入并用于计算以验证值

回答

相关问题