EqualTo Jquery有效不起作用

Question

我有一个验证jquery的问题，我有两个字段使用validatition 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>

Answer 1

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

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

Answer 2

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