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

Плагин 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 ]

82 голосов
/ 24 июня 2011

Я сделал это с успехом.

Вместо: 

Email: { required: true, email: true }

Я сделал это: 

Email: {
    required: {
        depends:function(){
            $(this).val($.trim($(this).val()));
            return true;
        }
    },
    email: true
}
21 голосов
/ 01 февраля 2011

Этот код работает для меня. Я не использовал его много, поэтому могут быть ошибки.

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

(function ($) {

    $.each($.validator.methods, function (key, value) {
        $.validator.methods[key] = function () {           
            if(arguments.length > 0) {
                arguments[0] = $.trim(arguments[0]);
            }

            return value.apply(this, arguments);
        };
    });
} (jQuery));

если вы используете select2 и проверку в одно и то же время, я рекомендую поместить el.val($.trim(el.val())); внутри IF, например: if(el.prop('type') != 'select-multiple'){el.val($.trim(el.val()));} Таким образом, ваша проверка jquery будет работать так, как ожидается, и позволит вам выбрать несколько элементов.

12 голосов
/ 02 мая 2012

Поскольку я хочу, чтобы это поведение было во всех моих формах по умолчанию, я решил изменить файл jquery.validate.js. Я применил следующее изменение к методу onfocusout:

Оригинал: 

onfocusout: function (element, event) {
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
        this.element(element);
    }
}

Кому: 

onfocusout: function (element, event) {
    if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT" && element.type !== "password")) {
        element.value = $.trim(element.value);
    }
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
        this.element(element);
    }
}

Я хочу разрешить пробелы в начале и конце пароля.

autoTrim может быть добавлен в качестве свойства к опциям.

8 голосов
/ 04 сентября 2012

Мне нравится подход xuser (https://stackoverflow.com/a/10406573/80002),, однако я не люблю возиться с исходным кодом плагина.

Итак, я предлагаю сделать это вместо: 

 function injectTrim(handler) {
  return function (element, event) {
    if (element.tagName === "TEXTAREA" || (element.tagName === "INPUT" 
                                       && element.type !== "password")) {
      element.value = $.trim(element.value);
    }
    return handler.call(this, element, event);
  };
 }


 $("form").validate({
    onfocusout: injectTrim($.validator.defaults.onfocusout)
 });
6 голосов
/ 09 июня 2012

При загрузке validator.js, есть файл с именем Additional-method.js, который содержит методы "nowhitespace" и "lettersonly", которые удаляют любые пробелы в поле. 

rules: {
  user_name: {
    required: true,
    minlength: 3,
    nowhitespace: true
  }
}
4 голосов
/ 02 июня 2017

Добавить новый метод проверки jQuery requiredNotBlank. Затем примените эту функцию к своим элементам, а не к функции required по умолчанию. Это решение не изменяет исходный исходный код валидатора и не изменяет функцию по умолчанию required, а также не изменяет значение элемента напрямую. 

// jQuery Validator method for required not blank.
$.validator.addMethod('requiredNotBlank', function(value, element) {
    return $.validator.methods.required.call(this, $.trim(value), element);
}, $.validator.messages.required);

// ...
$('#requiredNotBlankField').rules('add', 'requiredNotBlank');
4 голосов
/ 02 декабря 2009

Для справки, пока я не найду более элегантное решение, я использую addMethod следующим образом: 

// Extend email validation method so that it ignores whitespace
jQuery.validator.addMethod("emailButAllowTrailingWhitespace", function(value, element) {
    return (this.optional(element) || jQuery.validator.methods.email.call(this, jQuery.trim(value), element));
}, "Please enter a valid email");

$().ready(function() {
    $("#commentForm").validate({
        rules: {
            cemail: {
                required: true,
                emailButAllowTrailingWhitespace: true
            }
        }
    });
});

Примечание: это фактически не удаляет пробелы из поля, оно только игнорирует его. Поэтому вам необходимо убедиться, что вы выполняете trim на стороне сервера перед вставкой в ​​БД.

3 голосов
/ 11 апреля 2013

Вытащил регулярное выражение из валидатора jquery. Просто переопределите проверку электронной почты. 

$.validator.addMethod("email", function(value, element) {
value = value.trim();
return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
}, "Please enter a valid email.");
2 голосов
/ 12 июля 2014

Вот что у меня работает: 

$(':input').change(function() {
    $(this).val($(this).val().trim());
});
2 голосов
/ 02 декабря 2009

Не могли бы вы связать обрезку с событием размытия? Что-то вроде ... 

$("#cemail").blur(function(){
  $(this).val(jQuery.trim($(this).val());
});
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...