Hängen Sie die Fehlermeldung nur ein, wenn das Optionsfeld beim Klicken auf die Schaltfläche nicht aktiviert ist

Question

Ich versuche einen Fehler anzuzeigen, wenn ein Benutzer auf Senden klickt und einen der Optionsfelder nicht überprüft. Dieser Teil funktioniert gut. Nun, mein Problem ist, dass selbst wenn der Radiobutton aktiviert ist und der Benutzer die Taste drückt .. der Fehler direkt vor dem Senden des Formulars angezeigt wird. Warum wird dieser Fehler angezeigt, wenn das Optionsfeld aktiviert ist? Jede Hilfe wird geschätzt.

HTML:

<form action="javascript:void(0);"> 
    <input type="submit" class="add-cart " value="Add"> 
    <br /> 

    <p class="option-name">Size : </p> 
    <input type="radio" required="required" aria-required="true" id="product1" value="1" name="options[]" /> 
    <label class="label" for="product1">Small</label> 

    <input type="radio" required="required" aria-required="true" id="product3" value="3" name="options[]" /> 
    <label class="label" for="product3">Medium</label> 

    <input type="radio" required="required" aria-required="true" id="product4" value="4" name="options[]" /> 
    <label class="label" for="product4">Large</label> 

    <input type="radio" required="required" aria-required="true" id="product5" value="5" name="options[]" /> 
    <label class="label" for="product5">X-Large</label> 
</form> 

JS:

$(document).ready(function() { 
    var count = 0; 
    $(".add-cart").click(function() { 
    if (!$("input[name='options']").is(':checked') && count <= 0) { 
     $(".option-name").append("<p class='option-error'>This field is required</p>"); 
     count++; 
    } 
    }); 
}); 

JSFiddle Demo

Answer 1

Sie sind zur Zeit nicht zwischen den Anwendungen zurückzusetzen, hier ist eine neue Version:

$(document).ready(function() { 
 
    $(".add-cart").click(function() { 
 
    $(".option-error").html(""); 
 
    if (!$("input[name='options[]']:checked").val()) { 
 
     $(".option-error").html("This field is required"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="javascript:void(0);"> 
 
    <input type="submit" class="add-cart " value="Add"> 
 
    <br /> 
 

 
    <p class="option-name">Size : <p class="option-error"></p></p> 
 
    <input type="radio" required="required" aria-required="true" id="product1" value="1" name="options[]" /> 
 
    <label class="label" for="product1">Small</label> 
 

 
    <input type="radio" required="required" aria-required="true" id="product3" value="3" name="options[]" /> 
 
    <label class="label" for="product3">Medium</label> 
 

 
    <input type="radio" required="required" aria-required="true" id="product4" value="4" name="options[]" /> 
 
    <label class="label" for="product4">Large</label> 
 

 
    <input type="radio" required="required" aria-required="true" id="product5" value="5" name="options[]" /> 
 
    <label class="label" for="product5">X-Large</label> 
 
</form>