Как заставить проверить данные ввода HTML 5 из jquery? - PullRequest
Новая
       9

Как заставить проверить данные ввода HTML 5 из jquery?

0 голосов
/ 05 ноября 2018

У меня есть вход с шаблоном и заголовком, чтобы показать ошибку в случае неверных данных, мне не нужно использовать метод post, поэтому я просто делаю некоторый код Jquery для использования проверки ввода, но я могу не могу найти способ показать сообщение по умолчанию для ввода

Это ввод HTML5: 

<input type="text" id="user" pattern="whatever pattern" title="wrong value" required>

А это код jquery: 

    $("#inputEnviar").click(
    function(){

        var userValidation = $("#user")[0].checkValidity();

        //validate if the pattern match
        if ( userValidation ){

            //code to do whatever I have to do if the data is valid

        } else {
            //if the data is invalid
            //the input already has a default message to show
            //then, how do I force to show
            $("#user")-> FORCE TO SHOW TO THE DEFAULT ERROR MESSAGE OF THE INPUT
        }

    });

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Если проверка не пройдена, в вашем кодовом блоке else установите пользовательское сообщение, которое вы хотите уведомить пользователю: 

$("#user")[0].setCustomValidity("Please enter at least 5 characters.");

Затем вы можете использовать reportValidity(), чтобы показать это сообщение. От MDN :

Метод HTMLFormElement.reportValidity() возвращает true, если дочерние элементы управления элемента удовлетворяют ограничениям проверки. Когда возвращается false, для каждого недопустимого дочернего элемента запускаются отменяемые события invalid, и пользователю сообщается о проблемах проверки. 

$("#inputEnviar").click(
  function() {
    var userValidation = $("#user")[0].checkValidity();
    //validate if the pattern match
    if (userValidation) {
      //code to do whatever I have to do if the data is valid
    } else {
      $("#user")[0].setCustomValidity("Please enter at least 5 characters.");
      var isValid = $('#user')[0].reportValidity();
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="user" pattern="whatever pattern" title="wrong value" required>

<input id="inputEnviar" type="button" value="Send">

Для старых браузеров (т. Е. IE) вам нужно использовать полифилл.
Есть несколько реализаций (например, git ). Эта статья углубляется в тему.

0 голосов
/ 05 ноября 2018

Это должно работать. Функция reportValidity() покажет сообщение по умолчанию после того, как вы установили его с помощью setCustomValidity. 

function send() {
    var input = $("#user")[0];
    input.setCustomValidity("");
    if(!input.checkValidity()) {
        input.setCustomValidity("watch me break");
        input.reportValidity();
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="user" pattern="[^,]*" title="Message">
<button onclick="send()">Click</button>
...