提交表单时未选中单选框，如何添加error类？

问题根源 #

1. 单选按钮的val()始终有预设值（示例中的yes/no），原代码中$elem.val().length == 0的判断永远不会触发，因此不会给radio添加error类。
2. 即使给radio加上error类，由于CSS中设置了input[type=radio] { opacity: 0; }，视觉上完全看不到样式变化，错误样式需要作用在对应的label元素上。

修改后的完整代码 #

JavaScript 逻辑

(function ($) {
  $('#rsvp form input[type=submit]').click(function(e){
    e.preventDefault(); // 先阻止表单默认提交，执行校验逻辑
    var $form = $('#rsvp form');

    // 重置所有错误样式，避免残留
    $form.find('.required').removeClass("error");
    $form.find('.input-label').removeClass("error");

    // 处理文本输入框的校验
    $form.find('input.required[type=text]').each(function() {
      var $elem = $(this);
      if($elem.val().trim().length === 0){
        $elem.addClass("error");
      }
    });

    // 处理单选按钮组的校验
    var radioGroups = {};
    // 收集所有必填单选按钮的name分组
    $form.find('input.required[type=radio]').each(function() {
      radioGroups[$(this).attr('name')] = true;
    });

    // 逐个检查每个单选组是否有选中项
    $.each(radioGroups, function(groupName) {
      var hasChecked = $form.find('input[name=' + groupName + ']:checked').length > 0;
      if(!hasChecked){
        // 给该组所有单选按钮对应的label添加错误类
        $form.find('input[name=' + groupName + ']').next('.input-label').addClass("error");
      }
    });
  });
}) (jQuery);

CSS 样式调整

.error{
  background: red;
}

/* 直接给带error类的label设置红色边框 */
.input-label.error:before{
  border-color: red;
}

:root {
  --green: #9A9E90;
  --black: #000000;
}

fieldset{
  margin-bottom: 50px;
}

form{
  position: relative;
}

input {
  width: 100%;
  box-sizing: border-box;
  background: none;
  outline: none;
  resize: none;
  border: 0;
  border-bottom: 2px solid var(--green);
  border-left: 2px solid var(--green);
}
input[type=checkbox], input[type=radio] {
  position: absolute;
  opacity: 0;
}
input[type=submit] {
  cursor: pointer;
  display: inline-block;
  width: fit-content;
  color: var(--black);
  border: 2px solid var(--green);
  padding: 20px 30px;
  text-transform: uppercase;
}

.input-label {
  display: inline-block;
  position: relative;
  margin-right: 30px;
  padding-left: 25px;
  cursor: pointer;
}
.input-label:before, .input-label:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
  left: 0;
}
.input-label:before {
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--green);
}
.input-label:after {
  display: none;
  width: 9px;
  height: 9px;
  margin: 3px;
  background-color: var(--green);
  transform: translate(0px, -82%);
}

input:focus + .input-label:before {
  border-color: var(--green);
}

input:checked + .input-label:after {
  display: block;
}

HTML 结构（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="rsvp">
  <form>
    <fieldset>
      <span>Attending?</span>
      <input class="required" id="attending-yes" type="radio" name="attendance" value="yes" required />
      <label class="input-label" for="attending-yes">Yes</label>
      <input class="required" id="attending-no" type="radio" name="attendance" value="no" required />
      <label class="input-label" for="attending-no">No</label>
    </fieldset>
    
    <fieldset>
      <input class="required" type="text" name="full_name" placeholder="Your full name*" required />
    </fieldset>
    
    <input type="submit" name="submit" value="Send" />
  </form>
</div>

关键修改说明 #

1. 阻止默认提交：添加e.preventDefault()确保校验完成前不会提交表单。
2. 分组校验单选按钮：按name属性分组判断是否有选中项，而不是单独检查每个radio的value。
3. 错误样式转移到label：将error类添加到radio对应的label上，配合CSS修改实现视觉上的错误提示。
4. 重置样式：每次校验前清空所有错误类，避免多次点击后样式残留。

内容的提问来源于stack exchange，提问作者Freddy