Question

代码根本无法正常工作。问题出在哪里？

我希望必填字段在我单击“提交”按钮时显示错误消息（如果复选框中没有值）。但是如果请求的字段中有值，错误信息就会被隐藏。

它根本不起作用。我想通过保持我的 HTML 结构直接来解决这个问题。

$('form.trexcterc').on('submit', function () {

$('.checkbox_required').parent().next('.error').remove(); 
if (!$('.checkbox_required input[required')){

  if (!$('.checkbox_required input:checkbox').is(':checked') || !$('.checkbox_required input:radio').is(':checked')) {
  $(".checkbox_required").parent().after("<span class='error'>error message..</span>");
  } 
}
});

.trexcterc {
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

.form_item label {
  width: 100%;

}

.checkbox_heading {
  margin: 0;
}

.checkbox_item{
  display: flex;
  margin: 15px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form class="trexcterc">

<div class="form_item" id="form_item_checkbox" data-type="checkbox-group">

  <!-- Checkbox Group 1 -->
  <label for="after_shot" class="checkbox_heading">After Shot<span class="required_sign">*</span></label>

  <div class="checkbox-group checkbox-inline checkbox_required ">

    <div class="checkbox_item">
      <input type="checkbox" name="checkbox-one" id="checkbox-one" class="" value="Item One" required="required" />              
      <label for="checkbox-one"><span class="check_mark"></span>Item One</label>
    </div>

    <div class="checkbox_item">
      <input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />              
      <label for="checkbox-two"><span class="check_mark"></span>Item One</label>
    </div>

    <div class="checkbox_item">
      <input type="checkbox" name="checkbox-three" id="checkbox-three" class="" value="Item Three" required="required" />              
      <label for="checkbox-three"><span class="check_mark"></span>Item One</label>
    </div>
  </div>

  <!-- Checkbox Group 2 -->
  <div class="checkbox-group checkbox-inline checkbox_required ">

    <label for="after_shot" class="checkbox_heading">Before Shot<span class="required_sign">*</span></label>

    <div class="checkbox_item">
      <input type="checkbox" name="checkbox-item-one" id="checkbox-item-one" class="" value="Item One" required="required" />              
      <label for="checkbox-one"><span class="check_mark"></span>Item One</label>
    </div>

    <div class="checkbox_item">
      <input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />              
      <label for="checkbox-two"><span class="check_mark"></span>Item One</label>
    </div>
  </div>

</div>

<input type="submit" name="submit" value="submit" />

</form>

Answer 1

主要问题是原生 required 属性阻止了表单提交，因此您的提交事件侦听器没有被触发。相反，您可以使用简单的点击事件侦听器。

另一个问题是您需要遍历每个输入。

$('button').on('click', function() {
  $('.error').remove();
  $('.checkbox_required input[required]').each((i, el) => {
    if (!el.checked) {
      $(el).closest(".checkbox_item").after("<span class='error'>error message..</span>");
    }
  });
});

.trexcterc {
  width: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

.form_item label {
  width: 100%;
}

.checkbox_heading {
  margin: 0;
}

.checkbox_item {
  display: flex;
  margin: 15px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form class="trexcterc">

  <div class="form_item" id="form_item_checkbox" data-type="checkbox-group">

    <!-- Checkbox Group 1 -->
    <label for="after_shot" class="checkbox_heading">After Shot<span class="required_sign">*</span></label>

    <div class="checkbox-group checkbox-inline checkbox_required ">

      <div class="checkbox_item">
        <input type="checkbox" name="checkbox-one" id="checkbox-one" class="" value="Item One" required="required" />
        <label for="checkbox-one"><span class="check_mark"></span>Item One</label>
      </div>

      <div class="checkbox_item">
        <input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
        <label for="checkbox-two"><span class="check_mark"></span>Item One</label>
      </div>

      <div class="checkbox_item">
        <input type="checkbox" name="checkbox-three" id="checkbox-three" class="" value="Item Three" required="required" />
        <label for="checkbox-three"><span class="check_mark"></span>Item One</label>
      </div>
    </div>

    <!-- Checkbox Group 2 -->
    <div class="checkbox-group checkbox-inline checkbox_required ">

      <label for="after_shot" class="checkbox_heading">Before Shot<span class="required_sign">*</span></label>

      <div class="checkbox_item">
        <input type="checkbox" name="checkbox-item-one" id="checkbox-item-one" class="" value="Item One" required="required" />
        <label for="checkbox-one"><span class="check_mark"></span>Item One</label>
      </div>

      <div class="checkbox_item">
        <input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
        <label for="checkbox-two"><span class="check_mark"></span>Item One</label>
      </div>
    </div>

  </div>

  <button type="submit" name="submit">submit</button>

</form>

还要注意像这样的条件：if (!$('.checkbox_required input[required')) 在 jQuery 中不起作用，因为选择器总是返回一个 jQuery 对象。您需要使用 .length 来检查元素是否存在。你还有一个缺失的 ]，应该是
if (!$('.checkbox_required input[required]').length)

带有复选框/单选框的 jQuery 表单验证

1 个答案: