0
나는 JQuery와 양식 검사기 (http://formvalidator.net/)를 사용하고 있는데 나는 문제가 SELECT 상자를 검증하는 데 문제가 있습니다를 사용하여 정의되지 않은 방법을 호출 할 수 없습니다 받기. 위의 사이트를 검색했는데 아무 것도 발견하지 못했습니다. StackOverflow에서이 기사를 발견했습니다. (jQuery select box validation)JQuery와 양식 검사기
그러나 그것은 작동하지 않습니다 .... 나는 "정의되지 않은 방법을 호출 할 수 없습니다"얻을. JS 파일 사용
$(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");
});
: jquery.form-validator.js를 양식의 이름으로 ...은 $ .validate 서문 할 필요가 없습니다. 하지만 그렇게하면 유효성 검사기가 작동하지 않습니다. 내가하지 않으면
단, addMethod는() ... 작동하지 않습니다 그래서 나는 바위와 힘든 곳이 사이 붙어있어.
어떤 제안이 도움이 될 것입니다.
모두 감사합니다.피터
UPDATE : 여기 약화 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>
당신은, JSFIDDLE에서 전체 시험에 대한 귀하의 HTML을하시기 바랍니다 추가 할 수 있습니까? – radia
그랬어 그냥 ... 희망 좋아 –