İki onay kutusu grubu için uyarı iletileri

Question

Merhaba arkadaşlar onay kutularının işaretlenip onaylanmadığını ve uyarı mesajları görüntülenmediğini doğrulamak için jQuery kodum var. Her şey yolunda. İki farklı onay kutusu grubu için iki mesaj vardır. Şu anda her iki mesaj da son onay kutusu altında görüntülenir. İstediğim, "Kabul" onay kutusu altında Kabul mesajını görüntülemek ve "SEÇENEKLER" grup onay kutusunun altındaki seçeneklerden birini işaretlemektir. İşte JSFiddle. Herhangi bir yardım takdir

$(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.'); 

: Burada

bir koddur.

Answer 1

İşte buradasınız. errorPlacement işlevindeyken, element ürününüzün belirli bir özelliği olup olmadığını kontrol edebilirsiniz. Çünkü hata mesajını eklemeden önce hangi öğenin doğrulandığını bilmeniz gerekir. Bu durumda elemanın sınıfını kullandım.

Sana doğru, iki farklı yerde iki farklı mesajlar görüntülemek istediğiniz söyleyerek

$(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>