web-dev-qa-db-ja.com

チェックボックスのjQuery検証プラグインerrorPlacement

私はフォームを検証するためにjQuery Validationプラグインを使用しています。私の問題は、チェックボックスのエラーメッセージの場所です。この画像をご覧ください：

enter image description here

これはチェックボックス+ jQuery検証に関連するhtml部分です：

<fieldset id = "q8"> <legend class="Q8"></legend>
<label> What are your favourite genres of movies?<span>*</span></label>
<div class="fieldset content"> 

<style type="text/css">
 .checkbox-grid li {
 display: block;
 float: left;
 width: 25%;
}     
</style>

<ul class="checkbox-grid">
<li><input type="checkbox" name="q8[]" value="Action"><label for="checkgenre[]">Action</label></li>
<li><input type="checkbox" name="q8[]" value="Adventure"><label for="checkgenre[]">Adventure</label></li>
<li><input type="checkbox" name="q8[]" value="Comedy"><label for="checkgenre[]">Comedy</label></li>
<li><input type="checkbox" name="q8[]" value="Animation"><label for="checkgenre[]">Animation</label></li>
<li><input type="checkbox" name="q8[]" value="Drama"><label for="checkgenre[]">Drama</label></li> 
<li><input type="checkbox" name="q8[]" value="Romance"><label for="checkgenre[]">Romance</label></li>
  //Continued the same for OTHER CHECKBOXES 

</div>
</fieldset>

  //html for other questions...

 <input class="mainForm" type="submit" name="continue" value="Save and Continue" />  

</form>

<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

<script>
$(document).ready(function() {

 $('#form2').validate({ // initialize the plugin
    errorLabelContainer: "#messageBox",
    wrapper: "li",

    rules: {
       "q8[]": {
            required: true,
        },
       "q9[]": {
            required: true,
        },
        q10: {
            required: true,
        },
        q11: {
            required: true,
        },
        q12: {
            required: true,
        }

    },

      errorPlacement: function(error, element) {

      if (element.attr("type") == "radio") {
         error.insertBefore(element);
       } else {
         error.insertBefore(element);

    }
   }

 }); 
});
</script>

この問題を修正できる場合、または質問のすぐ横にエラーメッセージ（すべての入力タイプの場合）を表示できる場合、誰かが私を助けてくれますか？ （私は*の後の質問とまったく同じ行を意味します）??

ありがとう

jquerycheckboxjquery-validateerrorplacement
14
mOna

classをlabelに追加して、質問を簡単にしました...

_<label class="question">What are your favourite genres of movies?<span>*</span></label>
_

次に、単に「DOMトラバーサル」テクニックを練習する必要があります。メソッドを学ぶ ここ 。

  • $(element).parents('div')は、divのelementコンテナを検索します。

  • 次に、.prev($('.question'))は、このdivの最初の前の兄弟である_.question_に移動します。

すべてをまとめると、質問の直後にエラーメッセージが挿入されます。

_error.insertAfter($(element).parents('div').prev($('.question')))
_

errorPlacement内：

_errorPlacement: function (error, element) {
    if (element.attr("type") == "checkbox") {
        error.insertAfter($(element).parents('div').prev($('.question')));
    } else {
        // something else if it's not a checkbox
    }
}
_

デモ： http://jsfiddle.net/sgsvtd6y/

たぶん、あなたはinputタイプのすべてで機能するはずなので、条件は必要ありません。

_errorPlacement: function (error, element) {
    error.insertAfter($(element).parents('div').prev($('.question'))); 
}
_

それ以外の場合、HTMLが異なる場合は、少し変更されたDOMトラバーサルで条件を使用できます。

22
Sparky