Bootstrap проверка. Как я могу рассматривать ноль как ноль?

Question

Отрисованная html моей формы:

    <div class="form-group col-xl-6">
        <label class="form-label" for="SalePrice">Sale price</label>
        <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0" max="99999" step="0.10" required="">
        <div class="invalid-feedback">
            The field is required
        </div>
    </div>

Когда значение не введено, проверка работает отлично. The field is required отображается.

Но как я могу также рассматривать ноль как ноль?

Если пользователь вводит 0 как ввод, проверка не происходит.

Могу ли я расширить Обязательное свойство для нулевых значений также?

Answer 1

Для этого требования мы можем сделать это двумя способами. 1) Нет необходимости писать какие-либо проверки в jquery, напрямую нам нужно использовать проверку формы. При отправке формы или любой страницы кнопки класса укажите как отправить и использовать форму отправки FOR EX: -

<div class="container">
  <form id="val" action="" method="post">
    <h4>Validation With HTML5</h4>
    <div class="form-group col-xl-6">
      <label class="form-label" for="SalePrice">Sale price</label>
      <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0.1" max="99999" step="0.10" required="">
      <button id="btnSubmit" class="submit btn btn-primary">Submit</button>
    </div>
  </form>
</div>`

2) В части bootstrap вы присвоили элемент недействительной обратной связи класса. Если вы хотите отобразить элемент div в качестве сообщения обратной связи для проверки правильности ввода, вы можете следовать этому коду в jquery.

`<div class="form-group col-xl-6">
        <label class="form-label" for="SalePrice">Sale price</label>
        <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0" max="99999" step="0.10" required="">
        <div class="invalid-feedback" style="display:none">
            The field is required
        </div>
    </div>`


    `<script type="text/javascript">
    $(document).ready(function(){
    $("#SalePrice").change(function(){
    var saleprice = parseInt(($(this).val() == "" || $(this).val() == 0) ? 0 : $(this).val());
    if(saleprice == 0)
        $(".invalid-feedback").show();
        else
        $(".invalid-feedback").hide();    
});
});
</script>`

Answer 2

Да, вы можете подтвердить, чтобы достичь этого, как это:

$('#SalePrice').on('keyup', function(){
    if($(this).val() == 0){
        alert("Price Not Accepted!");
        $(this).val("");
    }
})

Answer 3

Вы действительно были озадачены проверкой HTML5 (вы упомянули здесь это как bootstrap проверка) и jQuery проверка. И то и другое с точки зрения аспектов развития.

Таким образом, для дифференциации обоих аспектов я добавил 2 формы, первую с обычной HTML5 проверкой и затем с плагином проверки JQyery. Оба варианта полностью соответствуют вашим ожиданиям, но jQuery будет немного лучше, так что HTML5 зависит от вашего браузера.

$(function() {

  $("form#val2").validate({
    rules: {
      SalePrice: {
        required: true,
        number: true,
        minlength: 0,
        range: [0.1, 99999]
      },
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      SalePrice: {
        required: "Sale Price is Required",
        number: "Enter a valid number",
        minlength: jQuery.validator.format("At least {0} characters required!"),
      },
      email: {
        required: "Email is required",
        email: "Your email address must be in the format of name@domain.com"
      }
    }
  });
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style type="text/css">
  form {
    margin: 30px;
    padding: 30px;
    border: 1px solid #8c8c8c;
  }
  
  label.error {
    color: red;
    margin-top: 5px;
  }
  
  .submit {
    margin-top: 15px;
    display: block;
  }
  
  .form-label {
    margin-top: 10px;
    display: block;
  }
</style>
<div class="container">

  <form id="val" action="" method="post">
    <h4>Validation With HTML5</h4>
    <div class="form-group col-xl-6">
      <label class="form-label" for="SalePrice">Sale price</label>
      <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0.1" max="99999" step="0.10" required="">
      <button id="submit" class="submit btn btn-success">Submit</button>
    </div>
  </form>

  <form id="val2" action="" method="post" novalidate>
    <h4>Validation with <a href="https://jqueryvalidation.org/validate/">jQuery Validation Plugin</a></h4>
    <div class="form-group col-xl-6">
      <label class="form-label" for="SalePrice">Sale price</label>
      <input class="form-control" id="SalePrice" type="number" name="SalePrice" min="0.1" max="99999" step="0.10">
      <label class="form-label" for="email">Email</label>
      <input class="form-control" id="email" type="email" name="email">
      <button id="submit1" class="submit btn btn-success">Submit</button>
    </div>
  </form>

</div>

Во второй форме HTML5 проверка ограничена использованием "novalidate" в теге формы