1

У меня есть функция валидации написанная с помощью jquery, которая выдает всплывающие окна при неправильном заполнении полей формы, но необходимо немного улучшить эту проверку с помощью bootstrap методов is-valid и is-invalid, но я не совсем понимаю как в jquery скрипте присваивать полям формы эти значения, нужна помощь

$(function(){
      $("#submit").click(function(){
      var $name=$("#name").val();
      
    var $namepattern=/^[^ ]([a-zA-Zа-яА-ЯІіЇїЄє']|\s)*$/;
    var $message = $("#message").val();
    if (!$name.match($namepattern)){
    alert("Введите ваше имя используя только буквы");
    return false;
    }
    var $email = $("#email").val();
    var $mailpattern=/^[^ ]+@[^ ]+\.[a-zA-Z]{2,4}$/;
    if (!$email.match($mailpattern))
    {
        alert("Заполните поле соответственно типу: [email protected]");
        return false;
    }
    
    var $number=$("#number").val();

    var $numberpattern=/^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\0-9]*$/;

    if (!$number.match($numberpattern))
    {
        alert("Заполните номер, используя только цифры от 0 до 9 +,- и скобки");
        return false;
    }
      });
    });

1 ответ 1

2

is-valid/is-invalid это не методы, а css-классы, которые предполагается использовать при проверке и генерации формы на стороне сервера.

в вашем случае используете чисто проверку по регулярке, поэтому в принципе ее можно убрать в pattern атрибут и практически избавиться от кода.

в приведенном примере сообщения меняются при изменении поля, допустимые значения - [a-z]+

$("#name").keyup(function(){
  $("#form").get(0).checkValidity();
  $("#form").addClass('was-validated');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>



<form class="mx-5 needs-validation" id="form">
  <label for="name">Name</label>
  <input type="text" class="form-control" id="name"  pattern="[a-z]+" required>
  <div class="valid-feedback">Looks good!</div>
  <div class="invalid-feedback">Please provide a valid name.</div>
</form>

в документации все, кажется, подробно расписано

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.