如何在必填字段中控制HTML 5验证？

Question

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

下面的代码。

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

您实际上在上面的代码中遇到了相同的问题，但是值不同...

请参见下面在我的网站上看到的验证消息的屏幕截图。

我不明白为什么当输入代码仅仅是此代码时，chrome HTML 5验证消息为什么返回此消息。

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

我当然应该可以在这里输入任何想要的值。

任何帮助将不胜感激。

Answer 1

在允许十进制值的数字形式输入中，看来 step 属性必须设置为 any 。

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

请参考html5 input for money/currency。