我正在使用Jquery表单验证器（http://formvalidator.net/）而我在验证SELECT框时遇到问题。我搜索了上面的网站，发现没什么。我在StackOverflow上发现了这篇文章。 （jQuery select box validation）
但它不起作用....我得到“不能调用未定义的方法”。
$(document).ready(function() {
//First validate the form
$.validate({
addValidClassOnAll: true,
rules: {
states: {
requiredState: true
},
color: {
requiredColor: true
},
size: {
requiredSize: true
}
},
onError: function() {
console.log('Form Validation failed');
return false;
},
onSuccess: function() {
console.log('Form is valid!');
return true; //Return False Will stop the submission of the form
}
});
$.validator.addMethod('requiredState', function(value) {
return (value !== 'XX');
}, "State required");
$.validator.addMethod('requiredColor', function(value) {
return (value !== 'select');
}, "Please select a Color");
$.validator.addMethod('requiredSize', function(value) {
return (value !== 'select');
}, "Please select a Size");
});
使用js文件：jquery.form-validator.js，不需要在$ .validate ...前加上表单名称。但如果我这样做，验证器就不起作用了。
但是如果我不这样做，那么addMethod（）就不起作用......所以我陷入了摇滚和硬地之间。
任何建议都会有所帮助。
谢谢大家。
彼得
更新：这是淡化的HTML
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<meta name="keywords" content="jquery, plugin, scratchpad, scratchcard, scratch" />
<meta name="description" content="A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image." />
<title>MyTitle for Testing</title>
<!-- CSS -->
<link rel="Stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="Stylesheet" type="text/css" href="css/bootstrap-form.css" />
</head>
<body>
<div id="content3">
<div id="content-new" class="contentShipping">
<form id="formNewShip" class="bootstrap-frm" action="someFormProcessor.php" method="post">
<h1 style="float: left;">Enter your shipping address</h1>
<div style="float: left; width: 255px;">
<label style="vertical-align: middle;display:none;">First Name: </label>
<input type="text" id="fname" name="fname" size="25" maxlength="20"
placeholder="First Name" data-validation="alphanumeric" />
<br>
</div>
<div style="float: right; width: 255px;">
<label style="vertical-align: middle;display:none;">Last Name: </label>
<input type="text" id="lname" name="lname" size="35" maxlength="35"
placeholder="Last Name" data-validation="alphanumeric" />
<br>
</div>
<br>
<div style="float: left; width: 262px;">
<label style="vertical-align: middle;display:none;">Address: </label>
<input type="text" id="address" name="address" size="30" maxlength="45"
placeholder="Address" data-validation="alphanumeric" />
<br>
</div>
<div style="float: left; width: 255px;">
<label style="vertical-align: middle;display:none;">Apt/Ste: </label>
<input type="text" id="aptste" name="aptste" size="15" maxlength="10"
placeholder="Apt/Ste" />
<br>
</div>
<div style="float: left; width: 262px;">
<label style="vertical-align: middle;display:none;">City: </label>
<input type="text" id="city" name="city" size="30" maxlength="45"
placeholder="City" data-validation="alphanumeric" />
<br>
</div>
<div style="float: right; width: 255px;">
<label style="vertical-align: middle;display:none;">State: </label>
<select id="states" name="states" title='Select your state.'>
<option value="XX" selected="selected">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<br>
</div>
<div style="float: left; width: 262px;">
<label style="vertical-align: middle;display:none;">Zip Code: </label>
<input type="text" id="zipcode" name="zipcode" size="30"
maxlength="5" placeholder="Zip Code"
data-validation="USAZipCode" />
<br>
</div>
<div style="float: right; width: 255px;">
<label style="vertical-align: middle;display:none;">Size: </label>
<select id="size" name="size" title='Select your size.'>
<option value="select" selected="selected">Size</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
<div style="float: left; width: 262px;">
<label style="vertical-align: middle;display:none;">Color: </label>
<select id="color" name="color" title='Select your color.'>
<option value="select" selected="selected">Color</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<div style="float: right; width: 255px;">
<label style="vertical-align: middle;display:none;">Email: </label>
<input type="text" id="email" name="email" size="30" maxlength="100"
placeholder="Email" data-validation="email" />
<br>
</div>
<div id="buttons" style="width: 210px;">
<div><button id="btnSubmit" type="submit" class="btn btn-primary center-block">Submit</button></div>
<!-- <div style="float: right;"><button id="btnReset" type="reset" class="btn btn-primary">Reset</button></div>-->
</div>
</form>
</div>
</div>
<div id="templates"></div>
<script type="text/javascript" src="assets/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery_form_validator/jquery.form-validator.js"></script>
</body>
</html>
答案 0 :(得分：1)
签出此Fiddle它有效，您必须在规则声明和使用之前声明您的验证方法
$("#formNewShip").validate({})
编辑：
要求第一，您应该将其添加到您的规则中：
fname: {
required: true
},
答案 1 :(得分：0)
我做了一个小提琴，它运作良好：
我添加了表单选择器并删除了onSuccess和onError处理程序，因为它们似乎是多余的，但行为完全符合我的预期。
检查您是否使用相同版本的jquery验证器代码作为我的小提琴（CDN at http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js）