Как управлять проверкой HTML 5 на поле, обязательном для заполнения - PullRequest
Новая
       33

Как управлять проверкой HTML 5 на поле, обязательном для заполнения

0 голосов
/ 11 марта 2019

Я создаю базовую форму и по какой-то причине я получаю очень странную проверку 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>

Вы на самом деле получаете ту же проблему в коде выше, но разные значения ...

enter image description here

См. Скриншот ниже сообщения о проверке, которое я вижу на своем веб-сайте.

enter image description here

Я не понимаю, почему сообщение проверки Chrome HTML 5 возвращает этосообщение, когда входной код просто такой .. 

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

Конечно, я должен иметь возможность указать здесь любое значение, которое я хочу.

Любая помощь будет чрезвычайно признательна.

1 Ответ

1 голос
/ 11 марта 2019

Похоже, что атрибут 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 ввод денег / валюты .

...