jQuery验证自定义错误
[英]jQuery Validation Custom Errors
问题描述
I am currently working on a project and having quite a difficult time with this plugin I managed to get it to work without custom errors one problem I ran across was if I have required tags on all elements email doesn't work but when I have it on just the email input it works. 
我目前正在开发一个项目，并且在使用此插件时遇到了很多困难，我设法使其正常运行而没有自定义错误，我遇到的一个问题是，如果我在所有元素上都需要标签，则电子邮件无法正常工作，但是当我拥有它时仅在电子邮件输入上有效。 When I attempt to run the custom validation I get no errors upon hitting the submit button. 当我尝试运行自定义验证时，单击“提交”按钮没有任何错误。
$(document).ready(function () { $(".form-horizontal").validate( { rules: { name: "required", social: "required", postal: { required: true, postal: true } , phone: { required: true, phone: true } , email: { required: true, email: true } } , messages: { radio: "Please select a gender.", option: "Please select a province." } } ); } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Lab 5 Part B</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/jquery-ui.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span> </div> <div id="navbar" class="navbar-collapse collapse"> </div> <!--/.navbar-collapse --> </div> </nav> <div class="container"> <div class="jumbotron"> <form class="form-horizontal" onsubmit="return false;"> <fieldset> <legend>Contact Details</legend> <div class="form-group"> <label for="inputName" class="col-lg-2 control-label">Name:</label> <div class="status"></div> <div class="col-lg-10"> <input type="name" class="form-control" id="inputName" name="inputName" placeholder="Your name"> </div> </div> <div class="form-group"> <label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label> <div class="status"></div> <div class="col-lg-10"> <input type="social" class="form-control" id="inputSocial" name="inputSocial" placeholder="(9 digits)"> </div> </div> <div class="form-group"> <label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label> <div class="status"></div> <div class="col-lg-10"> <input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label">Gender:</label> <div class="col-lg-10"> <div class="radio"> <div class="status"></div> <label> <input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male </label> <label> <input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female </label> </div> </div> </div> <div class="form-group"> <label for="select" class="col-lg-2 control-label">Province:</label> <div class="status"></div> <div class="col-lg-10"> <select class="form-control" name="selectProvince" id="selectProvince"> <option value="">Select One</option> <option value="AB">Alberta</option> <option value="BC">British Columbia</option> <option value="MB">Manitoba</option> <option value="NB">New Brunswick</option> <option value="NL">Newfoundland & Labrador</option> <option value="NS">Novia Scotia</option> <option value="NT">Northwest Territories</option> <option value="NU">Nunavut</option> <option value="ON">Ontario</option> <option value="PE">Prince Edward Island</option> <option value="QC">Quebec</option> <option value="SK">Saskatchewan</option> <option value="YT">Yukon</option> </select> </div> </div> <div class="form-group"> <label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label> <div class="status"></div> <div class="col-lg-10"> <input type="postal" class="form-control" id="inputPostal" name="inputPostal" placeholder="(Ex: L8S5CR)"> </div> </div> <div class="form-group"> <label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label> <div class="status"></div> <div class="col-lg-10"> <input type="phone" class="form-control" id="inputPhone" input="inputPhone" placeholder="(Ex: 905-321-4587)"> </div> </div> <div class="form-group"> <label for="inputEmail:" class="col-lg-2 control-label">Email:</label> <div class="status"></div> <div class="col-lg-10"> <input type="email" class="form-control" id="inputEmail" input="inputEmail"> </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </fieldset> </form> </div> <hr> <footer> <p>© Jamie Steele 2016</p> </footer> </div> <!-- /container --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="js/vendor/bootstrap.min.js"></script> <script src="js/jquery.validate.js"></script> <script src="js/jquery-ui.js"></script> <script src="js/main.js"></script> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2016-04-01 04:13:44
In your validation rules, you need to use the input element's name, but in your case that is not matching 在验证规则中，您需要使用输入元素的名称，但在这种情况下，它不匹配
You have name="inputName" in the element but in rules you are using name 您在元素中具有name="inputName" ，但在规则中您正在使用name
$(document).ready(function() { $(".form-horizontal").validate({ rules: { name: "required", social: "required", postal: { required: true, postal: true }, phone: { required: true, phone: true }, email: { required: true, email: true } }, messages: { radio: "Please select a gender.", option: "Please select a province." } }); });
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css"> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <span class="navbar-brand">Lab5: Form Validation with jQuery Validation Plugin</span> </div> <div id="navbar" class="navbar-collapse collapse"> </div> <!--/.navbar-collapse --> </div> </nav> <div class="container"> <div class="jumbotron"> <form class="form-horizontal" onsubmit="return false;"> <fieldset> <legend>Contact Details</legend> <div class="form-group"> <label for="inputName" class="col-lg-2 control-label">Name:</label> <div class="status"></div> <div class="col-lg-10"> <input type="name" class="form-control" id="inputName" name="name" placeholder="Your name"> </div> </div> <div class="form-group"> <label for="inputSocial" class="col-lg-2 control-label">Social Insurance No:</label> <div class="status"></div> <div class="col-lg-10"> <input type="social" class="form-control" id="inputSocial" name="social" placeholder="(9 digits)"> </div> </div> <div class="form-group"> <label for="inputBirth" class="col-lg-2 control-label">Date of Birth:</label> <div class="status"></div> <div class="col-lg-10"> <input type="birth" class="form-control" id="inputBirth" name="inputBirth" placeholder="(YYYY-MM-DD)"> </div> </div> <div class="form-group"> <label class="col-lg-2 control-label">Gender:</label> <div class="col-lg-10"> <div class="radio"> <div class="status"></div> <label> <input type="radio" name="optionsGender" id="optionGenderMale" value="optionGenderMale">Male </label> <label> <input type="radio" name="optionsGender" id="optionGenderFemale" value="optionGenderFemale">Female </label> </div> </div> </div> <div class="form-group"> <label for="select" class="col-lg-2 control-label">Province:</label> <div class="status"></div> <div class="col-lg-10"> <select class="form-control" name="selectProvince" id="selectProvince"> <option value="">Select One</option> <option value="AB">Alberta</option> <option value="BC">British Columbia</option> <option value="MB">Manitoba</option> <option value="NB">New Brunswick</option> <option value="NL">Newfoundland & Labrador</option> <option value="NS">Novia Scotia</option> <option value="NT">Northwest Territories</option> <option value="NU">Nunavut</option> <option value="ON">Ontario</option> <option value="PE">Prince Edward Island</option> <option value="QC">Quebec</option> <option value="SK">Saskatchewan</option> <option value="YT">Yukon</option> </select> </div> </div> <div class="form-group"> <label for="inputPostal" class="col-lg-2 control-label">Postal Code:</label> <div class="status"></div> <div class="col-lg-10"> <input type="postal" class="form-control" id="inputPostal" name="postal" placeholder="(Ex: L8S5CR)"> </div> </div> <div class="form-group"> <label for="inputPhone" class="col-lg-2 control-label">Telephone Number:</label> <div class="status"></div> <div class="col-lg-10"> <input type="phone" class="form-control" id="inputPhone" name="phone" placeholder="(Ex: 905-321-4587)"> </div> </div> <div class="form-group"> <label for="inputEmail:" class="col-lg-2 control-label">Email:</label> <div class="status"></div> <div class="col-lg-10"> <input type="email" class="form-control" id="inputEmail" name="email"> </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <button type="reset" class="btn btn-default">Cancel</button> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </fieldset> </form> </div> <hr> <footer> <p>© Jamie Steele 2016</p> </footer> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery验证，如果出现错误如何运行自定义代码 - Jquery Validation, how do I run custom code if there are errors
Summernote的jQuery验证错误 - jQuery Validation errors with summernote
jQuery 不显眼验证中的分组错误 - Grouping errors in jQuery Unobtrusive Validation
jQuery验证插件错误作为摘要 - jQuery validation plugin errors as summary
jQuery创建双重验证错误 - jquery creating double validation errors
jQuery验证不起作用，控制台中没有错误 - jQuery Validation not working, No errors in console
basistist jQuery验证抛出错误 - bassistance jQuery Validation throwing errors
jQuery ValidationEngine自定义验证 - Jquery ValidationEngine Custom Validation
jQuery中的自定义验证 - Custom Validation in Jquery
jQuery自定义表单验证 - Custom form validation with jQuery
相关标签