僅在按鈕單擊時沒有選中單選按鈕時附加錯誤消息

Question

我試圖顯示錯誤，如果用戶按下提交併且不檢查其中一個單選按鈕。這部分工作正常。現在，我的問題是，即使單選按鈕被選中並且用戶按下按鈕，錯誤也會在表單提交之前顯示。爲什麼單選按鈕被選中時顯示錯誤？任何幫助將不勝感激。

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

您當前未使用之間重新設置，這裏有一個新的版本：

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