0

我正在创建一个基本表单，出于某种原因，我在我的数字字段上得到了非常奇怪的 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>

当然，我应该能够在这里放任何我想要的价值。

任何帮助将不胜感激。

4

1 回答 1

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>

请参考html5 输入的货币/货币。

于 2019-03-11T16:25:34.867 回答