仅在单击按钮时未选中单选按钮时才附加错误消息

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>