web-dev-qa-db-ja.com

jquery.validateプラグイン-フォーム検証の前に値をトリムする方法

私は優れた jquery.validationプラグイン JörnZaeffererを使用していますが、フォーム要素を検証する前に自動的にトリムする簡単な方法があるかどうか疑問に思っていましたか？

以下は、電子メールアドレスを検証するフォームの切り取りながら実際の例です。

_<!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>
_

問題は、電子メールアドレスに誤って空白を入力したために一部のユーザーが混乱していることです。 「[email protected]」。また、フォームは送信されず、「有効なメールアドレスを入力してください」というエラーメッセージが表示されます。技術に詳しくないユーザーは、空白を見つける方法を知らないため、間違ったことを解決しようとするのではなく、サイトを終了するだけです。

とにかく、検証の前に「jQuery.trim(value)」をチェーンして、空白が削除され、検証エラーが発生しないことを望んでいましたか？

addMethod を使用して、独自の電子メール検証関数を作成できます。しかし、もっとエレガントなソリューションがあると確信していますか？

jqueryjquery-validate
56
Tom

私はこれを成功させました。

の代わりに：

Email: { required: true, email: true }

これは私がしました：

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

このコードは私のために機能します。あまり使用していないので、バグがあるかもしれません。

各メソッドをラップし、値である最初の要素をトリミングします。

_(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検証は期待どおりに動作し、複数のアイテムを選択できるようになります。

22
hwiechers

デフォルトですべてのフォームでこの動作が必要なので、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は、オプションのプロパティとして追加できます。

13
tmorell

私は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)
 });
8
mark

Validator.jsをダウンロードするとき、フィールド内の空白を取り除く「nowhitespace」および「lettersonly」メソッドを含むadditional-methods.jsというファイルがあります。

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

新しい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
sevencardz

参考までに、よりエレガントなソリューションが見つかるまで、次のように 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
            }
        }
    });
});

注：これは実際にフィールドから空白を削除せず、無視するだけです。したがって、DBに挿入する前に、サーバー側でtrimを実行することを確認する必要があります。

4
Tom

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.");
3
RyanCodes

JQuery Validationプラグインバージョン1.15以降では、 ノーマライザー関数 がサポートされています。ノーマライザは、検証の前に要素の値を変換できます。

ノーマライザの結果は検証にのみ使用されることに注意してください。要素の値を更新する場合は、明示的に更新する必要があります。

$("#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;
            }
        }
    }
});
2
Craig Wohlfeil

トリムをぼかしイベントにバインドできませんか？何かのようなもの...

 $（ "＃cemail"）。blur（function（）{
 $（this）.val（jQuery.trim（$（this）.val（））; 
 }）;
2
Psytronic

これは私のために働くものです：

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

これらの大部分は、必要なものではないことがわかりました。

以下を使用すると、キーダウンではなくフォームの変更時にのみ起動し、残りの検証についてキーストロークをチェックできます。

プラグインに含めるほど整然としていませんが、許容できる妥協案です。

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

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（value）.lengthに変更します

1
Amul

次のようにフォームがチェックされる前にコードを実行できます。

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に保存するために使用しました。必要に応じて、代わりに値をトリムするために使用できます。

0
mpen

なぜこれをしないのですか？

キーアップイベントの後に検証が行われています。キーアップ時に、テキストボックスの値をトリミングした値に置き換えます（または正規表現を使用してスペースを削除します）。

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