javascript - 使用 Radio 验证表单模态 Jquery

问题描述

我正在使用模式弹出窗口，除非单选按钮，否则一切都会得到验证......有人可以帮我吗？

我从堆栈中看到了一些代码，我也做了同样的事情，对两者都使用无线电“select”的名称，并将 like required 放入规则中，但不起作用..

我真的不知道这段代码有什么问题......

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();
                   }
                    
                });
        
        });

.wrapper {
  height: 100vh;
  /* This part is important for centering the content */
  display: flex;
  align-items: center;
  justify-content: center;
  /* End 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;
}

<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>

解决了

我找到了解决方案，并使用工作片段为每个想要使用的人更新了问题；）

标签： javascriptjqueryformsvalidation

javascript - 使用 Radio 验证表单模态 Jquery

问题描述

解决方案

推荐阅读