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

Ответ 1

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

Вместо:

Email: { required: true, email: true }

Я сделал это:

Email: {
    required: {
        depends:function(){
            $(this).val($.trim($(this).val()));
            return true;
        }
    },
    email: true
}

Ответ 2

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

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

(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 будет вести себя так, как ожидалось, и позволит вам выбрать несколько элементов.

Ответ 3

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

Оригинал:

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

To:

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 может быть добавлен как свойство для параметров.

Ответ 4

Мне нравится подход xuser (fooobar.com/questions/113529/...), однако мне не нравится возиться с исходным кодом плагина.

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

 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)
 });

Ответ 5

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

rules: {
  user_name: {
    required: true,
    minlength: 3,
    nowhitespace: true
  }
}

Ответ 6

Для справки, пока я не найду более элегантное решение, я использую 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 на стороне сервера перед вставкой в ​​БД.

Ответ 7

Добавить новый метод проверки 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');

Ответ 8

Выталкивает регулярное выражение из валидатора 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.");

Ответ 9

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

$("#cemail").blur(function(){
  $(this).val(jQuery.trim($(this).val());
});

Ответ 10

Это то, что работает для меня:

$(':input').change(function() {
    $(this).val($(this).val().trim());
});

Ответ 11

Начиная с версии 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;
            }
        }
    }
});

Ответ 12

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

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

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

$('body').on 'change', 'form input[type=text], form input[type=email]',  ->
    $(@).val $.trim($(@).val())

Ответ 13

В подтверждении 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;
    }

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

Ответ 14

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

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 обратно в соответствующие техасы. Вы можете использовать его, чтобы обрезать значения, если хотите.

Ответ 15

Используйте нормализатор, пожалуйста, проверьте ниже пример

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
  $("#myform").validate({
    rules: {
      field: {
        required: true,
        normalizer: function(value) {
          // Trim the value of the 'field' element before
          // validating. this trims only the value passed
          // to the attached validators, not the value of
          // the element itself.
          return $.trim(value);
        }
      }
    }
  });
</script>

Ответ 16

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

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

$("#user_name").on("keyup", function(){
    $("#user_name").val($.trim($("#user_name").val()));
});