Плагин jquery.validate - как обрезать значения перед проверкой формы - PullRequest
Новая
       27

Плагин jquery.validate - как обрезать значения перед проверкой формы

55 голосов
/ 01 декабря 2009

Я использую превосходный плагин jquery.validation от Jörn Zaefferer, и мне было интересно, есть ли простой способ автоматически обрезать элементы формы до их проверки?

Ниже приведен сокращенный, но рабочий пример формы, которая проверяет адрес электронной почты: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
           type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js" 
           type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function() {
          $("#commentForm").validate({
            rules: {
                email: {
                    required: true,
                    email: true
                }
            }
          });
        });
    </script>
</head>
<body>

  <form class="cmxform" id="commentForm" method="get" action="">
     <label for="cemail">E-Mail:</label><input id="cemail" name="email"
      class="required email" />
     <input class="submit" type="submit" value="Submit"/>
  </form>

</body>
</html>

Проблема в том, что некоторые пользователи запутываются, потому что они случайно вводят пробелы в свой адрес электронной почты, например, "test@test.com". И форма не будет отправлена ​​и имеет сообщение об ошибке: «Пожалуйста, введите действительный адрес электронной почты». Нетехнические пользователи не знают, как распознать пробелы, и могут просто покинуть сайт, а не пытаться понять, что они сделали неправильно.

В любом случае, я надеялся, что смогу связать "jQuery.trim(value)" до проверки, так что Пробелы удалены, и ошибка проверки никогда не возникает?

Я мог бы использовать addMethod , чтобы создать свою собственную функцию проверки электронной почты. Но я уверен, что есть более элегантное решение?

Ответы [ 15 ]

1 голос
/ 09 мая 2018

Начиная с версии 1.15 плагина jQuery Validation поддерживается функция нормализатора Нормализатор может преобразовать значение элемента перед проверкой.

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

$("#form").validate({
    rules: {
        email: {
            required: true,
            email: true,
            // Optionally disable validation on every key press
            onkeyup: false,
            normalizer: function(value) {
                // Update the value of the element
                this.value = $.trim(value);
                // Use the trimmed value for validation
                return this.value;
            }
        }
    }
});
1 голос
/ 28 июня 2017

В проверке JQuery вы найдете следующий код: 

required: function( value, element, param ) {

        // Check if dependency is met
        if ( !this.depend( param, element ) ) {
            return "dependency-mismatch";
        }
        if ( element.nodeName.toLowerCase() === "select" ) {

            // Could be an array for select-multiple or a string, both are fine this way
            var val = $( element ).val();
            return val && val.length > 0;
        }
        if ( this.checkable( element ) ) {
            return this.getLength( value, element ) > 0;
        }
        return value.length > 0;
    }

Измените value.length на $ .trim (значение) .length

1 голос
/ 13 декабря 2013

Я обнаружил, что большинство из них не совсем то, что нужно.

Использование следующего запускается только при изменении формы, а не при нажатии клавиши, что позволяет вам проверять нажатие клавиши до конца проверки.

Это не так аккуратно, как включение в плагин, но это приемлемый компромисс. 

$('body').on 'change', 'form input[type=text], form input[type=email]',  ->
    $(@).val $.trim($(@).val())
0 голосов
/ 07 сентября 2016

Почему бы не сделать это?

Проверка происходит после события keyup. В keyup замените значение текстового поля его усеченным значением (или используйте регулярное выражение для удаления пробела): 

$("#user_name").on("keyup", function(){
    $("#user_name").val($.trim($("#user_name").val()));
});
0 голосов
/ 16 марта 2016

Вы можете запустить код до проверки формы следующим образом: 

var origCheckForm = $.validator.prototype.checkForm;
$.validator.prototype.checkForm = function() {
    $(this.currentForm).find('.CodeMirror').each(function() {
        if(this.CodeMirror && this.CodeMirror.save) {
            this.CodeMirror.save();
        }
    });

    return origCheckForm.apply(this, arguments);
};

Я использовал его, чтобы сохранить все мои экземпляры CodeMirror обратно в соответствующие им texareas. Вы можете использовать его для обрезки значений, если хотите.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...