Nano Hash - криптовалюты, майнинг, программирование

Bootstrap 4 вручную аннулирует поле ввода изначально

Я хочу использовать проверку формы Bootstrap 4. Из того, что я прочитал, вы можете аннулировать поле, добавив класс «is-invalid» - это работает, но когда я хочу проверить действительность формы с помощью метода checkValidity(), он все еще говорит, что форма ДЕЙСТВИТЕЛЬНА, что не то, что я ожидал. Я надеялся использовать встроенную функциональность bootstrap 4, а не использовать плагины, такие как jquery validator и т. д.

            $('#submit_button').on('click', function(e){
            var forms = document.getElementsByClassName('needs-validation');

            var validation = Array.prototype.filter.call(forms, function(form) {
                if (form.checkValidity() === false) {
                    console.log("form is INVALID")
                    event.preventDefault();
                    event.stopPropagation();
                } else {
                    console.log("form is VALID")
                }
                // form.classList.add('was-validated');        
                });
            })
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>  
</head>
<body>
    <form class="needs-validation" id="my_form">
        <div class="form-group">
            <div class="form-check">
            <label for="taskname_l">Task Name</label>
            <div class="form-inline">
                <input type="text" class="form-control task_form is-invalid" id="taskname_in" name="taskname_in">
            </div>            
        </div>
    </div>   
        <button class="btn btn-primary" type="button" id="submit_button">Submit form</button>
      </form>
</body>

javascript validation html jquery bootstrap-4
25.08.2020

Ответы:


1

Вариант 1:

Используя JQUERY, вы можете использовать функцию .val()

Чтобы получить значение поля ввода с идентификатором taskname_in, используйте этот код

$('#taskname_in').val()

Фрагмент варианта 1:

$('#submit_button').on('click', function(e) {
  var forms = document.getElementsByClassName('needs-validation');

  var validation = Array.prototype.filter.call(forms, function(form) {
    if ($('#taskname_in').val() == '') {
      console.log("form is INVALID")
      event.preventDefault();
      event.stopPropagation();
    } else {
      console.log("form is VALID")
    }
    // form.classList.add('was-validated');        
  });
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
</head>

<body>
  <form class="needs-validation" id="my_form">
    <div class="form-group">
      <div class="form-check">
        <label for="taskname_l">Task Name</label>
        <div class="form-inline">
          <input type="text" class="form-control task_form" id="taskname_in" name="taskname_in">
        </div>
      </div>
    </div>
    <button class="btn btn-primary" type="button" id="submit_button">Submit form</button>
  </form>
</body>

Вариант 2. Использование средства проверки формы для одновременной проверки всех полей ввода.

Фрагмент варианта 2:

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">Looks good!</div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="" required>
      <div class="valid-feedback">Looks good!</div>
    </div>

  </div>

  <button class="btn btn-primary btn-sm" type="submit">Submit form</button>
</form>

25.08.2020
  • Спасибо за ваш ответ. Я надеялся, что смогу сразу проверить всю форму вместо того, чтобы делать это для каждого поля, которое у меня будет. Мой процесс будет заключаться в выполнении множества других проверок (не только если они пусты), и если я не хочу проходить проверку, я бы добавил к входным данным 'is-invalid' класс, а затем прямо в конце проверить действительность всего форма. 25.08.2020
  • Добавлен вариант 2, проверяет все поле формы 25.08.2020
  • Пожалуйста, смотрите мой ответ Притешу К. 25.08.2020

    • 2

    'is-invalid' не делает это конкретное поле недействительным. он просто применяет CSS, чтобы выглядеть недействительным.

    Результат HTMLElement.checkValidity() зависит от его ограничения.

    Предположим, вы добавляете поле с «обязательным» ограничением и запускаете checkValidity() для формы или поля, пока оно пусто, вы получите ответ как false, что означает, что форма или поле недействительны.

    В вашем случае просто добавьте необходимое в поле ввода, и вы получите ответ как недействительный, если отправите форму, пока поле пусто.

    25.08.2020
  • ах, так что просто примените CSS - так и думал. Дело в том, что я не хочу обязательно проверять обязательность как единственное ограничение. Например, я хочу проверить, что входное значение еще не существует в моей базе данных sql-lite через AJAX, и если оно уже существует, применить к полю класс CSS IS-INVALID, но тогда я также хочу, чтобы оно было INVALID поэтому, когда я проверяю действительность формы, когда пользователь нажимает кнопку «Отправить», она не проходит. У меня будут разные проверки на разных входах. 25.08.2020

    • 3

    Если у вас есть код проверки Bootstrap по умолчанию для обязательных полей:

    $(".needs-validation").submit(function() {
    var form = $(this);
    if (form[0].checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.addClass('was-validated');
  });

    Вам просто нужно добавить еще одну проверку, например, при вводе, и использовать setCustomValidity. Например, если вы хотите проверить одинаковые значения пароля и подтвердить пароль:

    if ($('form input[name="confirm_password"').length > 0) {
    $('input[name="confirm_password"').on('change paste keyup', function() {
        var password = $(this).closest('form').find('input[name="password"').val();
        if($(this).val() !== password){
            this.setCustomValidity('Passwords must match');
        } else {
            this.setCustomValidity('');
        }
    });
};

    Если у вас есть сообщение о недопустимой обратной связи рядом с элементом ввода, оно покажет это сообщение вместо того, которое вы установили здесь.

    21.06.2021
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..