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>

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

1 个答案: