web-dev-qa-db-ja.com

読み取り専用フィールドでjquery検証を有効にするにはどうすればよいですか？

http://jqueryvalidation.org/ の皆さん、バージョン1.13.1がリリースされました。彼らのウェブサイトをチェックすると、変更ログにこれが表示されます：

CORE：*読み取り専用および無効なフィールドを無視します。 （9f4ba10）

これはリンクです： https://github.com/jzaefferer/jquery-validation/commit/9f4ba10ea79b4cf59225468d6ec29911f0e53a0a

私はいくつかのbootstrapテンプレートを使用し、そのうちの1つがそのバージョンを使用するようになりました。これは問題を引き起こします。ユーザーが日付を手動で入力するのを防ぐためにreadonly属性を使用するので、唯一のオプションは日付を選択することです日付ピッカー。

この変更により、検証プラグインは、必要とマークされた読み取り専用の入力を無視します。1.13.1または将来のバージョンの修正を提案する手助けをしてくれる人はいますか？反対の質問を見つけました： 読み取り専用フィールドでjquery検証を無効にするにはどうすればよいですか？

jquerydatepickerjquery-validatereadonly
20
Daniel Avellaneda

Panoptikの提案に感謝します。readonlyにfocusinを追加し、focusoutにそれを削除するのが最もきれいな方法でした、100万の感謝です！誰かが同じ問題を抱えている場合に備えて、私は自分に答えます。それが役に立てば幸い。

$(document).on("focusin", "#someid", function() {
   $(this).prop('readonly', true);  
});

$(document).on("focusout", "#someid", function() {
   $(this).prop('readonly', false); 
});
40
Daniel Avellaneda

読み取り専用フィールドの処理を除いて、元の「要素」関数を元の実装と非常によく似た実装でオーバーライドできます。これはエレガントなソリューションではありませんが、機能します。 jquery検証ライブラリーを更新する場合は、オーバーライドされたメソッドを再確認する必要もあります。
* UpToDate *jquery-validate-1.14を参照 changeLog ：元に戻す」 :) :)

$.validator.prototype.elements = function() {
    var validator = this,
    rulesCache = {};

    return $( this.currentForm )
    .find( "input, select, textarea" )
    .not( ":submit, :reset, :image, [disabled]") // changed from: .not( ":submit, :reset, :image, [disabled], [readonly]" )
    .not( this.settings.ignore )
    .filter( function() {
        if ( !this.name && validator.settings.debug && window.console ) {
            console.error( "%o has no name assigned", this );
        }

        if ( this.name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {
            return false;
        }

        rulesCache[ this.name ] = true;
        return true;
    });         
};
10
saffer

発生したreadonlyイベントにfocusin属性を設定するソリューションは優れていますが、<script>ブロックにハンドラーを書き込む必要があります（なぜですか？たとえば、Firefoxは入力要素のonfocusin attrをサポートしていません） ）。

したがって、シンプルでクロスプラットフォームのソリューション私の意見では、onkeydown="return false;"属性は次のように設定されています。

<input type="text" name="myBean.date" onkeydown="return false;">

これにより、要素が検証の対象となり、何も入力できなくなります。

2
Yan Pak

Focusin/outイベントにバインドするのは好きではありませんでした。また、CSSスタイルを追加する必要があります。以下のコードは、readonly属性を削除し、フォームが無効な場合に再適用します。

$('#form').submit(function () {
    var children = $(this).find('input[readonly]');
    children.prop('readonly', false);

    var validform = $(this).valid();
    if (validform) {
        $(this).unbind('submit').submit();
    } else {
        children.prop('readonly', true);
    }

    e.preventDefault();
    e.stopPropagation();
})
2
ska