Form Modal中使用Jquery Validate时单选按钮校验失败求助

我在使用模态弹窗表单时，除单选按钮外其余所有字段都可以正常通过jQuery Validate校验。我已经给两个单选按钮都设置了name属性为select，并且在校验规则中添加了required必填配置，但校验始终不生效，相关代码片段如下：

问题代码片段 #

JS代码 #

jQuery(function($){
    var form = $("#pop_up");
    form.validate({
        errorElement: 'span',
        errorPlacement: function(error, element) {
            if (element.attr("type") == "radio") {
                error.appendTo('#nameError');
            } else {
                error.insertAfter(element);
                $(element).closest('.form-control').addClass("has-error");
            }
        },
        errorClass: 'help-block',
        highlight: function(element, errorClass, validClass) {
            $(element).closest('.form-control').addClass("has-error");
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).closest('.form-control').removeClass("has-error");
        },
        rules: {
            nome: {
                required: true,
            },
            email:{
                required: true,
                email: true,
            },
            select:{
                required: true,
            },
        },
        messages: {
            nome: {
                required: "Insira seu Nome",
            },
            email: {
                required: "Insira seu Email",
                email: "Insira um Email Válido",
            },
            select: {
                required: "Selecione uma Opção",
            },
        },
        submitHandler: function(form) {
            form.submit();
       }
        
    });
});

CSS代码 #

.wrapper {
  height: 100vh;
  /* 该部分用于内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 居中样式结束 */
  background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
  background: linear-gradient(to right, #834d9b, #d04ed6);
}

.wrapper a {
  display: inline-block;
  text-decoration: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  color: #585858;
  font-family: 'Roboto', sans-serif;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal__content {
  border-radius: 4px;
  position: relative;
  width: 500px;
  max-width: 90%;
  background: #fff;
  padding: 1em 1em;
}

.modal__footer {
  text-align: right;
  a {
    color: #585858;
  }
  i {
    color: #d02d2c;
  }
}
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}

@import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #0069d9;
  font-family: 'Lato', sans-serif;
}
.wrapper{
  display: inline-flex;
  background: #F8F9FA;
  height: 50px;
  width:100%;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
}
.wrapper .option{
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #0069d9;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}

#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
  border-color: #0069d9;
  background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
  background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span{
  font-size: 17px;
  color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
  color: #fff;
}

HTML代码 #

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Lato:900">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<h3 style="text-align:center">Receba</h3>
<hr>

<div class="card bg-light">
  <form class="card-body" action="" method="" id="pop_up">

    <div class="wrapper">
      <input style="opacity:0; position:absolute" type="radio" name="select" value="cliente" id="option-1">
      <input style="opacity:0; position:absolute" type="radio" name="select" value="consultor" id="option-2">
      <label style="margin-right:10px" for="option-1" class="option option-1 form-control-label">
        <div class="dot"></div>
        <span>Cliente</span>
      </label>
      <label style="margin-left:10px" for="option-2" class="option option-2 form-control-label">
        <div class="dot"></div>
        <span>Consultor</span>
      </label>
    </div>
    <div style="padding-left:0px;" class="col-md-12 col-xs-12"><div id="nameError"></div></div>

    <div class="form-group">
      <label class="h4 form-control-label" for="input1">Nome</label>
      <input type="text" class="form-control" placeholder="Insira seu nome" name="nome" id="nome">
      <div class="valid-feedback">Nome preenchido</div>
      <div class="invalid-feedback">Preencha seu nome</div>
    </div>
    <div class="form-group">
      <label class="h4 form-control-label" for="input3">E-mail</label>
      <input type="email" placeholder="Insira seu melhor e-mail" class="form-control was-validated" name="email" id="email">
      <div class="valid-feedback">E-mail preenchido</div>
      <div class="invalid-feedback">Insira um e-mail válido</div>
    </div>

    <div>
      <button type="submit" style="width:100%" class="btn btn-success">GRAVAR</button>
    </div>  

  </form>
</div>

问题根因是jQuery Validate默认校验时会忽略隐藏元素，本次代码中的单选按钮设置了opacity:0; position:absolute被识别为隐藏元素，导致校验规则不生效。仅需要在validate配置中添加ignore: []配置项即可修复问题，调整后的核心配置如下：

form.validate({
    ignore: [], // 新增这一行，关闭默认隐藏元素忽略规则
    // 其余原有配置保持不变
    errorElement: 'span',
    // ...其余原有代码
})

调整后的代码可正常校验单选按钮的必填规则，供有相同需求的开发者参考使用。

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