チェックボックスの2つのグループの警告メッセージ

Question

こんにちは私は、チェックボックスがチェックされている場合、および警告メッセージが表示されていない場合、検証するjQueryコードがあります。すべて正常に動作します。 2つの異なるグループのチェックボックスには2つのメッセージがあります。現時点では、両方のメッセージが最後のチェックボックスの下に表示されます。私がしたいのは、 "同意"チェックボックスの下にある同意メッセージを表示し、チェックボックスの "オプション"グループの下にあるオプションの1つを選択することです。ここはJSFiddleです。ここで

はコードです：

$(document).ready(function() { 
    var checkboxes = $('.require-one'); 
    var checkbox_names = $.map(checkboxes, function(e, i) { 
     return $(e).attr("name") 
    }).join(" "); 

    $("#itemForm").validate({ 
     groups: { 
      checks: checkbox_names 
     }, 
     rules: { 
      resp01: 'required', 
     }, 
     messages: { 
      resp01: { 
       required: 'You must agree before submitting!' 
      }, 
     }, 

     errorPlacement: function(error, element) { 
      $('#form_error').append(error); 
     }, 

     submitHandler: function(form) { 
      alert('Form Submited'); 
      return false; 
     } 

    }); 
}); 

$.validator.addMethod('require-one', function(value) { 
    if ($('#resp01').is(':checked')) { 
     return $('.require-one:checked').size() > 0; 
    } else { 
     return true; 
    } 
}, 'Please select one of the options.'); 

すべてのヘルプ高く評価しました。

Answer 1

ここにあります。 errorPlacement機能では、elementに特定の機能があるかどうかを確認できます。エラーメッセージを挿入する前に、どの要素が検証されているかを知る必要があるためです。この場合、私は要素のクラスを使用しました。

$(document).ready(function() { 
 

 
    var checkboxes = $('.require-one'); 
 
    var checkbox_names = $.map(checkboxes, function(e, i) { 
 
    return $(e).attr("name") 
 
    }).join(" "); 
 

 
    $("#itemForm").validate({ 
 
    groups: { 
 
     checks: checkbox_names 
 
    }, 
 
    rules: { 
 
     resp01: 'required', 
 
    }, 
 
    messages: { 
 
     resp01: { 
 
     required: 'You must agree before submitting!' 
 
     }, 
 
    }, 
 
    errorPlacement: function(error, element) { 
 
     if ($(element).hasClass("require-one")) { 
 
     $('#require-one-error').append(error); 
 
     } else { 
 
     $('#resp-error').append(error); 
 
     } 
 
    }, 
 
    submitHandler: function(form) { 
 
     alert('Form Submited'); 
 
     return false; 
 
    } 
 

 
    }); 
 
}); 
 

 
$.validator.addMethod('require-one', function(value) { 
 
    if ($('#resp01').is(':checked')) { 
 
    return $('.require-one:checked').size() > 0; 
 
    } else { 
 
    return true; 
 
    } 
 
}, 'Please select one of the options.');

* { 
 
    font-family: Verdana; 
 
    font-size: 96%; 
 
} 
 

 
label.error { 
 
    float: none; 
 
    color: red; 
 
    margin: 0 .5em 0 0; 
 
    vertical-align: top; 
 
    font-size: 10px; 
 
    display: block 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script> 
 

 
<form name="itemForm" id="itemForm" method="post"> 
 
    <fieldset style="width:200px"> 
 
    <legend>OPTIONS</legend> 
 
    <input id="opt01" name="opt01" type="checkbox" value="true" class="require-one" /> 
 
    <label for="opt01">opt01</label> 
 
    <input name="opt01" type="hidden" value="false" /> 
 
    <br /> 
 

 
    <input id="opt02" name="opt02" type="checkbox" value="true" class="require-one" /> 
 
    <label for="opt02">opt02</label> 
 
    <input name="opt02" type="hidden" value="false" /> 
 
    <br /> 
 

 
    <input id="opt03" name="opt03" type="checkbox" value="true" class="require-one" /> 
 
    <label for="opt03">opt03</label> 
 
    <input name="opt03" type="hidden" value="false" /> 
 
    <br /> 
 
    </fieldset> 
 
    <div class="error require-one-error" id="require-one-error"></div> 
 
    <p> 
 
    <input name="resp01" type="checkbox" value="Agree" id="resp01" class="resp" /> 
 
    <label for="resp01">Agree</label> 
 
    </p> 
 
    <div class="error" id="resp-error"></div> 
 
    <input type="submit" /> 
 
</form>