如何控制HTML5在数字必填字段上的验证？

Question

我正在创建一个基本的表单，出于某种原因，我在我的数字字段上得到了非常奇怪的HTML5验证。

代码如下。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div class="container-fluid mt-5">
<form id="custom_price_calculator">
  <div class="form-row">
    <div class="col-md-3 col-4 mb-3">
      <label for="inputCalculatorQty" class="font-weight-bolder">Quantity</label>
      <input type="number" class="form-control" id="inputCalculatorQty" value="1" min="1" required>
    </div>
    <div class="col-md-3 col-4 mb-3">
      <label for="inputCalculatorUnitPrice" class="font-weight-bolder">Unit Price</label>
      <input type="number" class="form-control" id="inputCalculatorUnitPrice" min="0.01" value="0.81" required>
    </div>
    <div class="col-md-3 col-4 mb-3">
      <label for="inputCalculatorQty" class="font-weight-bolder">Origination</label>
      <input type="number" class="form-control" id="inputCalculatorQty" value="100" min="1" required>
    </div>
    <div class="col-md-3 mt-md-4 mb-3">
      <button class="btn btn-primary btn-sweets btn-block" type="submit"><i class="fas fa-calculator"></i> Calculate price</button>
    </div>
  </div>
</form>
</div>

你实际上在上面的代码中得到了同样的问题，但不同的值...

<input type="number" class="form-control" id="inputCalculatorUnitPrice" min="0.01" value="0.81" required>

任何帮助都将不胜感激。

Answer 1

在允许十进制值的数字表单输入中，step属性似乎必须设置为任意。

<form id="custom_price_calculator">
  <div class="form-row">
    <div class="col-md-3 col-4 mb-3">
      <label for="inputCalculatorQty" class="font-weight-bolder">Quantity</label>
      <input type="number" class="form-control" id="inputCalculatorQty" value="1" min="1" required>
    </div>
    <div class="col-md-3 col-4 mb-3">
      <label for="inputCalculatorUnitPrice" class="font-weight-bolder">Unit Price</label>
      <input type="number" class="form-control" id="inputCalculatorUnitPrice" min="0.01" value="0.81" step=any required>
    </div>
    <div class="col-md-3 col-4 mb-3">
      <label for="inputCalculatorQty" class="font-weight-bolder">Origination</label>
      <input type="number" class="form-control" id="inputCalculatorQty" value="100" min="1" required>
    </div>
    <div class="col-md-3 mt-md-4 mb-3">
      <button class="btn btn-primary btn-sweets btn-block" type="submit"><i class="fas fa-calculator"></i> Calculate price</button>
    </div>
  </div>
</form>