英文:
jQuery validation plugin not working as it should
问题
我正在使用jQuery验证插件进行表单验证，但它不起作用。
当我尝试验证表单时，它只是重新加载页面，什么也不发生。我唯一获得结果的时候是当我的一个输入标签中有"required"时，但我已经有了规则和消息，它们应该正常工作。
我尝试了所有但找不到错误发生在哪里。
另外，我有两个表单，但我只显示第一个表单的代码，因为它们基本相同。我已经检查过我的链接标签，但它们似乎没有错误。
$().ready(function() {
$("#formFisica").validate({
onkeyup: false,
onfocusout: false,
rules: {
// 省略其他规则...
},
messages: {
// 省略其他消息...
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<div class="container text-center">
<!-- 省略其他内容... -->
</div>
<div class="container pt-2" id="containerFisica">
<form id="formFisica">
<!-- 省略其他表单元素... -->
<input type="submit" value="Validate!" />
</form>
</div>
<div class="container pt-2" id="containerJuridica">
<form id="formJuridica">
<!-- 省略其他表单元素... -->
<input type="submit" value="Validar" />
</form>
</div>
<script src="./validation.js" type="text/javascript"></script>
<script src="./script.js" type="text/javascript"></script>
英文:
I'm working on a form validation with the jQuery validation plug-in and it's not working properly.
When I try to validate the form it just reloads the page and nothing happens. The only time i get a result is when i have the "required" in one of my input tags, but as I already have the rules and messages, they should be working fine
I tried everything but can't find where I'm doing wrong
Also I have two forms, but I'm showing only the first form's code because they are pretty much the same
I already checked my link tags, but they don't seems to be wrong at all
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$().ready(function() {
$("#formFisica").validate({
onkeyup: false,
onfocusout: false,
rules: {
nomeFisica: {
required: true,
},
cpfFisica: {
required: true,
number: true,
maxlength: 11
},
dddFisica: {
required: true,
number: true,
maxlength: 2
},
telFisica: {
required: true,
number: true,
maxlength: 9
},
emailFisica: {
required: true,
email: true
},
confEmailFisica: {
required: true,
equalTo: "#emailFisica"
},
senhaFisica: {
required: true,
minlength: 6,
maxlength: 15
},
confSenhaFisica: {
required: true,
equalTo: "#senhaFisica"
},
},
messages: {
nomeFisica: {
required: "Esse campo não pode ser vazio"
},
cpfFisica: {
required: "Esse campo não pode ser vazio",
number: "Esse campo só aceita números",
},
dddFisica: {
required: "Esse campo não pode ser vazio",
number: "Esse campo só aceita números",
},
telFisica: {
required: "Esse campo não pode ser vazio",
number: "Esse campo só aceita números",
},
emailFisica: {
required: "Esse campo não pode ser vazio",
email: "Digite um endereço de e-mail valido"
},
confEmailFisica: {
required: "Esse campo não pode ser vazio",
equalTo: "Os e-mails não correspondem"
},
senhaFisica: {
required: "Esse campo não pode ser vazio"
},
confSenhaFisica: {
required: "Esse campo não pode ser vazio",
equalTo: "As senhas não correspondem"
},
}
});
})
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container text-center">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="" id="flexCheckDefaultFisica">
<label for="flexCheckDefaultFisica" class="form-check-label">Pessoa Física</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" value="" id="flexCheckDefaultJuridica">
<label for="flexCheckDefaultJuridica" class="form-check-label">Pessoa Jurídica</label>
</div>
</div>
</div>
<div class="container pt-2" id="containerFisica">
<form id="formFisica">
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">Nome completo</label>
<input type="text" class="form-control" id="nomeFisica" aria-describedby="emailHelp" placeholder="Insira seu nome" required/>
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">CPF</label>
<input type="number" class="form-control" id="cpf" placeholder="Insira seu CPF" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">DDD</label>
<input type="number" class="form-control" id="dddFisica" placeholder="DDD" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Telefone</label>
<input type="number" class="form-control" id="telFisica" placeholder="Número de telefone" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">E-mail</label>
<input type="email" class="form-control" id="emailFisica" aria-describedby="emailHelp" placeholder="Insira seu e-mail" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">Confirmar E-mail</label>
<input type="email" class="form-control" id="confEmailFisica" aria-describedby="emailHelp" placeholder="Confirme seu e-mail" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Senha</label>
<input type="password" class="form-control" id="senhaFisica" placeholder="Insira sua senha" />
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Confirmar Senha</label>
<input type="password" class="form-control" id="confSenhaFisica" placeholder="Confirme sua senha" />
</div>
<div class="form-check pt-2">
<input type="radio" class="form-check-input" id="aceitoEmailFisica" />
<label class="form-check-label" for="aceitoEmailFisica">Aceito receber e-mails</label>
</div>
<div class="form-check pt-2">
<input type="radio" class="form-check-input" value="" id="flexCheckChecked" checked/>
<label class="form-check-label" for="flexCheckChecked">Aceito as políticas de privacidade</label>
</div>
<input type="submit" value="Validate!" />
</form>
</div>
<div class="container pt-2" id="containerJuridica">
<form id="formJuridica">
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">Razão Social</label>
<input type="text" class="form-control" id="razaoSocial" aria-describedby="emailHelp" placeholder="Razão Social" required>
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">CNPJ</label>
<input type="number" class="form-control" id="cnpj" placeholder="Insira seu CNPJ">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">DDD</label>
<input type="number" class="form-control" id="dddJuridica" placeholder="DDD">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Telefone</label>
<input type="number" class="form-control" id="telJuridica" placeholder="Número de telefone">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">E-mail</label>
<input type="email" class="form-control" id="emailJuridica" aria-describedby="emailHelp" placeholder="Insira seu e-mail">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputEmail1">Confirmar E-mail</label>
<input type="email" class="form-control" id="confEmailJuridica" aria-describedby="emailHelp" placeholder="Confirme seu e-mail">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Senha</label>
<input type="password" class="form-control" id="senhaJuridica" placeholder="Insira sua senha">
</div>
<div class="form-group pt-2 pb-2">
<label for="exampleInputPassword1">Confirmar Senha</label>
<input type="password" class="form-control" id="confSenhaJuridica" placeholder="Confirme sua senha">
</div>
<div class="form-check pt-2">
<input type="radio" class="form-check-input" id="aceitoEmailJuridica">
<label class="form-check-label" for="aceitoEmailJuridica">Aceito receber e-mails</label>
</div>
<div class="form-check pt-2">
<input type="radio" class="form-check-input" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">Aceito as políticas de privacidade</label>
</div>
<input type="submit" value="Validar">
</form>
</div>
<script src="./validation.js" type="text/javascript"></script>
<script src="./script.js" type="text/javascript"></script>
<!-- end snippet -->
答案1
得分: 0
根据文档，插件要求所有输入字段都必须包含name属性。在指定规则和消息时，应使用name属性。
英文:
As per documentation, the plugin requires that all the input fields should contain a name attribute.
When specifying the rules and messages inside .validate() function, you should use the name attribute.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论