EqualTo Jquery Valid 不起作用[重复]

Posted 2023-05-09

【中文标题】EqualTo Jquery Valid 不起作用[重复]

【英文标题】：EqualTo Jquery Valid doesn't work [duplicate]

【发布时间】：2017-03-16 11:56:58

【问题描述】：

我的验证 jquery 有问题，我有两个字段要使用验证 equalTo，他发送消息“请再次输入相同的值。”

我做的一切都是正确的，但我继续收到消息。

$(document).ready(function() 
  $("#cadUser").validate(
    rules: 
      nome: 
        required: true,
        minlength: 3
      ,
      txtemail: 
        required: true,
        email: true
      ,
      ctremail: 
        required: true,
        equalTo: "txtemail"
      ,
      txtsenha: 
        required: true
      ,
      ctrsenha: 
        required: true,
        equalTo: "txtsenha"
      
    ,
    messages: 
      nome: 
        required: "Campo Nome: Não Pode ser Vazio!</br>",
        minlength: "Campo Nome: Não poede ser menor que 3 caracteres</br>"
      ,
      txtemail: 
        required: "Campo E-mail: Não Pode ser Vazio!</br>",
        email: "Campo E-mail: Precisa ser um E-mail Válido!</br>"
      ,
      ctremail: 
        required: "Campo confirma E-mail: Não Pode ser Vazio!</br>"
      ,
      txtsenha: 
        required: "Campo Senha: Não Pode ser Vazio!</br>"
      ,
      ctrsenha: 
        required: "Campo Confirma Senha: Não Pode ser Vazio!</br>"
      
    ,

    //Monta a mensagem em uma caixa separada
    errorLabelContainer: $('#msgBox')
  );

);

#corpo_principal 
  height: auto;
  width: 900px;
  margin: 0 auto;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 3px;
  background-color: #EBEBEB;

header 
  height: 220px;
  width: 100%;
  background-image: url("imagens/tabernaculo.png");
  background-position-y: -40px;

footer 
  height: 100px;
  width: 100%;
  margin-top: 10px;
  background-color: #084584;

.conteudo 
  height: auto;
  width: 100%;
  max-width: 890px;
  margin-top: 10px;
  padding: 5px;
  background-color: #F5F5F5;

.login 
  height: 220px;
  width: 220px;
  margin: auto;
  padding: 30px;

#nav-superior 
  height: 30px;
  width: 100%;
  background-color: #084584;

.menuHoriz 
  height: 30px;
  width: 880px;
  padding: 5px;
  float: left;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 5px;
  padding-top: 10px;

.menuHoriz li 
  display: inline;
  list-style: none;
  height: 20px;
  width: 60px;
  margin-right: 10px;

.menuHoriz a 
  color: white;
  text-decoration: none;
  font-weight: bold;

.menuHoriz a:link 
  color: white;

fieldset 
  margin: 10px;

.inputform 
  margin: 5px;
  color: #900;
  font-size: 12px;

table 
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;

td,
th 
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;

th 
  background-color: #555;
  color: white;

tr:nth-child(odd) 
  background-color: #ededed;

tr:nth-child(even) 
  background-color: #dddddd;

#Content 
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

.item 
  height: 150px;
  width: 30%;
  float: left;
  text-align: center;
  background-color: #dddddd;
  text-align: left;
  padding: 5px;

.item header 
  width: 100%;
  height: 20%;
  margin: 0%;
  background-image: none;
  background-color: #084584;
  margin: 0%;

.item h1 
  font-size: 14pt;
  color: yellow;
  margin: 0%;
  text-align: center;

.infPos 
  background-color: #CAFF70;
  color: black;
  font-size: 1em;
  padding: 2px;
  border-bottom: 1px dashed black;
  font-weight: bold;

.infNega 
  background-color: #FF8C69;
  color: black;
  font-size: 1em;
  padding: 2px;
  border-bottom: 1px dashed black;
  font-weight: bold;

.item a:link 
  color: #ffc73d;
  text-decoration: none;

.item a:visited 
  color: #000000;
  text-decoration: none;

.item a:hover 
  color: #000000;
  text-decoration: underline;

.item a:active 
  color: #ffc73d;
  text-decoration: underline;
  background-color: #000000;

input:invalid 
  border: 1px solid red;

input:valid 
  border: 1px solid green;

#msgBox 
  width: 98%;
  height: auto;
  color: black;
  padding: 10px;
  background-color: #FF8C69;
  font-weight: bold;
  margin-top: 5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<fieldset>
  <legend>Cadastro de Usuário</legend>
  <form method="POST" action="users.php?epr=save" id="cadUser">
    <label>Nome:</label>
    <input type="text" name="txtnome" size="30" required="true" value=""></input>
    <label>E-mail:</label>
    <input type="text" name="txtemail" id="txtemail" size="25" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,3$" value=""></input>
    <label>Confirme o E-mail:</label>
    <input type="text" name="ctremail" id="ctremail" size="25" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,3$" value="" required="required"></input>
    <br/>
    <label>Login:</label>
    <input type="text" name="txtlogin" size="15"></input>
    <label>Senha:</label>
    <input type="password" name="txtsenha" id="txtsenha" size="15"></input>
    <label>Confirme a Senha:</label>
    <input type="password" name="ctrsenha" id="ctrsenha" size="15" required="required"></input>
    <label>Função do Usuário:</label>
    <select name="ddlFuncao" class="inputform">
      <option value="default">------</option>
      <option value="Secretaria">Secretaria</option>
      <option value="Financeiro">Financeiro</option <option value="Adm">Administrador</option>
    </select>
    <input type="submit" name="inserir" value="Criar Usuário" />
  </form>
  <div id="msgBox"></div>
</fieldset>

【参考方案1】：

equalTo method 需要有效的选择器，而您使用的选择器似乎不是有效的。尝试使用 ID 选择器：

ctremail:  required: true ,equalTo: "#txtemail" ,
txtsenha:  required: true,  
ctrsenha: required: true, equalTo: "#txtsenha"

【参考方案2】：

ctremail:  required: true ,equalTo: "#txtemail" ,
ctrsenha: required: true, equalTo: "#txtsenha"