1

複数の入力がある単純な html フォームがあります。

jQuery検証を使用して、ユーザーが正しく入力せずに送信ボタンを押したときに、これらの入力の背景色を変更しています(これは理想的ではないことはわかっていますが、フィールド名は自明であり、赤い背景で十分です)。

ただし、一部のフィールドは type=radio または type=checkbox であり、背景色を変更できません。このフィールドのテキストの色を赤に変更するか、テキストの背景色を赤に変更したかったのです。jQuery検証から異なる要素に2つの異なるクラスを適用する方法がわかりません。

これが私のコードの関連部分です：

JS:

<script>
    $(document).ready(function(){
        $("#registerForm").validate({
            rules: {
                firstname: {
                    required: true,
                    minlength: 2
                },
                lastname: {
                    required: true,
                    minlength: 2
                },
                gender: {
                    required: true  
                },
                policy: "required"
            },
            errorClass: 'invalidField'
    });
</script>

HTML:

<input id="firstname" name="firstname" />

<input id="lastname" name="lastname" />

<input type="radio" id="gender" name="gender" value="male" />Masculino
<input type="radio" id="gender" name="gender" value="female" />Feminino

<input type="checkbox" id="policy" name="policy" value="accept" />Eu li e aceito os termos acima

CSS:

.invalidField {
    background-color: #ffdddd;
}

ありがとう。

4

5 に答える 5

1

errorPlacement を試すことができます。これを検証関数の開き括弧の後に置きます。

$("#registerForm").validate({ 
    errorPlacement: function (error, element) {
       if (element.attr("name") == "elementName") {
            $(element).css('background-color', '#ffdddd')
       }
    }, // continue your validation code (rules + errorclass)    
});

「elementName」を入力の名前に変更します。element.attr() == '' を変更して、type=radio または type=checkbox であるかどうかをテストできます。

于 2013-03-19T23:43:48.710 に答える
1

これを試して：

HTML:

<input id="firstname" name="firstname" />

<input id="lastname" name="lastname" />

<div>
    <input type="radio" id="gender" name="gender" value="male" />
    <span class="highlightMe">Masculino</span>

    <br/>

    <input type="radio" id="gender" name="gender" value="female" />
    <span class="highlightMe">Feminino</span>
</div>

CSS:

.invalidField {
    background-color: #ffdddd;
}

.invalidField ~ .highlightMe {
    background-color: #ffdddd;
}
于 2013-03-19T21:05:34.903 に答える
0

highlightおよびunhighlightcallback 関数オプションを使用する必要があります。radioデフォルトから始めて、それらを編集して、checkbox要素で何か違うことを行います。

radio条件文をorcheckbox要素を探すように変更することで、デフォルトをすでに変更しています。これらのコールバックは、各要素が検証されるたびに各要素に対して起動します。

  • hightlight特定の要素でエラーが発生するたびに発生します。

  • unhighlight特定の要素が検証に合格するたびに発生します。

これら 2 つの関数のそれぞれの一部を微調整して、これらの要素に必要なスタイリングを行うだけです。

    highlight: function (element, errorClass, validClass) {
        if (element.attr("type") === "radio" || element.attr("type") === "checkbox") {
            // change this line to add special 'error' styling to radio and checkbox elements
            this.findByName(element.attr("name")).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.attr("type") === "radio" || element.attr("type") === "checkbox") {
            // change this line to remove the special 'error' styling to radio and checkbox elements
            this.findByName(element.attr("name")).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    },

デモでは、回答のコードを使用しました。

デモ: http://jsfiddle.net/qwj5S/

   highlight: function (element, errorClass, validClass) {
        if ($(element).attr("name") === "gender") {
            $('.genderError').addClass('invalidField');
        } else if ($(element).attr("name") === "policy") {
            $('.policyError').addClass('invalidField');
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if ($(element).attr("name") === "gender") {
            $('.genderError').removeClass('invalidField');
        } else if ($(element).attr("name") === "policy") {
            $('.policyError').removeClass('invalidField');
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    },

CSS :

特別な CSS はありません。invalidField同じプロパティを共有するため、これは同じクラスを使用します。

于 2013-03-20T15:27:52.380 に答える
0

ラジオとチェックボックスの入力に特定の JS を追加することで、やりたいことができました。これが私がしたことです：

JS:

$('#policy').change(function(){
    if (this.checked) {
        $('.policyError').css('background-color', '#ffffff')
    }
    else {
        $('.policyError').css('background-color', '#ffdddd')
    }
});
$('.gender').change(function() {
    $('.genderError').css('background-color', '#ffffff')
});

HTML:

<input type="radio" class="gender" name="gender" value="male" ><span class="genderError">Masculino</span>
<input type="radio" class="gender" name="gender" value="female" /><span class="genderError">Feminino</span>
<input type="checkbox" id="policy" name="policy" value="accept" /><span class="policyError">Eu li e aceito os termos acima</span>

CSS:

.invalidField {
    background-color: #ffdddd;
}
.invalidField ~ .genderError {
    background-color: #ffdddd;
}
.invalidField ~ .policyError {
    background-color: #ffdddd;
}
于 2013-03-20T15:14:54.843 に答える
0

jQuery validate の各要素で同じクラスを使用できませんでしたが、より具体的な CSS ルールを使用して、配色に必要なものを取得できませんでしたか。例:

.invalidField {
    background-color: #ffdddd;
}
input[type=checkbox].invalidField,
input[type=radio].invalidField {
    color: #ffdddd;
}
于 2013-03-19T23:24:53.473 に答える