javascript - Jquery 検証と CSS

Question

フォームフィールドを含むページに複数の DIV があります。それらのいくつかは必須であり、いくつかは必須ではありません。ユーザーがデータを入力して 1 つの div から別の div にジャンプすると、必須フィールドが満たされていることを検証し、その CSS を変更する必要があります。完成したDIV.必要なフィールドが満たされていない場合、CSS効果を変更するべきではありません.Jqueryでこれにアプローチしたいので、誰かがアプローチするための適切でクリーンなデザインを提供できますか.

ありがとう

score 1 · Accepted Answer

コンテンツの検証にjQuery バリデータプラグインを使用できます。

div がフォーカスを失ったら、検証に合格したかどうかを確認できます。そうでない場合は、css を適用しないか、css を適用します。

サンプルコード:

$("#divid").validate({
    onfocusout: false,    //once div looses focus validate
    rules: {
        //your rules go here
    }
});

score 0 · Accepted Answer

jQuery検証を使用すると、コントロールのグループを検証する独自のメソッドを作成できます。このアプローチを使用して、クラス名「validationGroup」のdivまたはフィールドセットで要素をラップします。次に、グループ内からイベントをトリガーすると、DOMを上に移動して、クラス名を持つ親要素に移動し、その下にあるすべてを検証します。このアプローチを使用すると、編集中の現在のdiv内のコントロールに対する検証を制御/制限できます。

function ValidateAndSubmit（evt）{var isValid = true;

// Get Validator & Settings
var validator = $("#aspnetForm").validate();
var settings = validator.settings;

// Find the parent control that contains the elements to be validated
var $group = $(evt.currentTarget).parents('.validationGroup');

// Grab all the input elements (minus items listed below)
$group
    .find(":input")
    .not(":submit, :reset, :image, [disabled]")
    .not(settings.ignore)
    .each(function (i, item)
    {
        // Don't validate items without rules
        if (!validator.objectLength($(item).rules()))
            return true;

        if (!$(item).valid())
            isValid = false;
    });

// If any control is the group fails, prevent default actions (aka: Submit)
if (!isValid) {
    evt.preventDefault();
}

return isValid;

}

score 0 · Accepted Answer

0

jquery 検証プラグインを見てみましょう

于 2012-06-01T19:57:01.447 に答える

javascript - Jquery 検証と CSS

3 に答える 3

Related

Reference