我有一项任务，我遇到了一个无法解决的问题。我添加了jqueryui datepicker插件，我的所有表单验证都消失了。
以下是代码
<!DOCTYPE html>
<html lang="en-ca" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mystyle3.css">
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/includes/vendor/js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="/includes/vendor/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="/includes/vendor/js/additional-methods.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 1,
maxDate: -1,
showButtonPanel: true
});
});
</script>
<script>
$(function() {
$( "#inputform" ).validate({rules: {
fname: {
required: true,
minlength: 2,
maxlength: 20,
alphanumeric: true,
},
lname: {
required: true,
minlength: 2,
maxlength: 20,
alphanumeric: true,
},
street: {
required: true,
minlength: 4,
street: true,
},
city: {
required: true,
minlength: 4,
},
zip: {
required: true,
minlength: 4,
maxlength: 5,
digits: true,
zip: true
}, tel: {
required: true,
minlength: 10,
tele: true,
}, email: {
required: true,
email: true
}
},
messages: {
}
});
$.validator.addMethod("alphanumeric",
function(value, element) {
return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
},
"Sorry, no special characters allowed"
);
});
$.validator.addMethod('zip', function (value) {
return /^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/.test(value);
}, 'Please enter a valid US zip code.');
$.validator.addMethod('street', function (value) {
return /^[a-zA-Z0-9-\/] ?([a-zA-Z0-9-\/]|[a-zA-Z0-9-\/] )*[a-zA-Z0-9-\/]$/.test(value);
}, 'Please enter a valid street address.');
$.validator.addMethod('city', function (value) {
return /^[a-zA-z] ?([a-zA-z]|[a-zA-z] )*[a-zA-z]$/.test(value);
}, 'Please enter a valid City.');
$.validator.addMethod('tele', function (value) {
return /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/.test(value);
}, 'Please enter a valid Telephone number.');
</script>
<title>Assignment 3 Input form</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href="http://www.jkozla.com/default.htm"><span>Home</span></a>
</li>
<li class='active has-sub'><a href='#'><span>Assignments</span></a>
<ul>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment1.htm><span>Assignment 1</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment2.htm><span>Assignment 2</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment3.html><span>Assignment 3</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment4.htm><span>Assignment 4</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment5.htm><span>Assignment 5</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment6.htm><span>Assignment 6</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment7.htm><span>Assignment 7</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment8.htm><span>Assignment 8</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment9.htm><span>Assignment 9</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment10.htm><span>Assignment 10</span></a>
</li>
<li class='has-sub'><a href=http://www.jkozla.com/assignment/Assignment11.htm><span>Assignment 11</span></a>
</li>
</ul>
</li>
<li class='active has-sub'><a href="#"><span>Classes</span></a>
<ul>
<li class='has-sub'><a href="https://cop4813eaglin.pbworks.com/w/page/34415594/FrontPage"><span>COP4813</span></a>
</li>
<li class='has-sub'><a href="https://cas.fsu.edu/cas/login?service=https%3A%2F%2Fcampus.fsu.edu%2Fwebapps%2Fbb-auth-provider-cas-bb_bb60%2Fexecute%2FcasLogin%3Fcmd%3Dlogin%26authProviderId%3D_105_1%26redirectUrl%3Dhttps%253A%252F%252Fcampus.fsu.edu%252Fwebapps%252Fportal%252Fframeset.jsp%26sessionIdForLogout%3DEB7D8A9EDEE7CA79B83CA34E8C9FA206"><span>MAD2104</span></a>
</li>
</ul>
</li>
<li class='active has-sub'><a href="#"><span>Project</span></a>
<li class='last'><a href="mailto:jmk13c@my.fsu.edu"><span>Contact</span></a>
</li>
</ul>
</div>
<h1>COP 4813 Form Validation</h1>
<form id="inputform" method="get" onsubmit="javascript:alert('I do also submit');">
<p>
<label for="fname">First Name: </label>
<input name="fname" class="fname" type="text" size="15" />
</p>
<p>
<label for="lname">Last Name: </label>
<input name="lname" class="required" type="text" size="15" />
</p>
<p>
<label for="street">Street Address: </label>
<input name="street" class="required" type="text" pattern="[a-zA-Z0-9\s]+" size="20" />
</p>
<p>
<label for="city">City: </label>
<input name="city" class="required" type="text" pattern="[a-zA-Z0-9\s]+" size="15" />
</p>
<p>
<label for="state">State: </label>
<select name="state" size="1">
<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">Dist 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>
<p>
<label for="zip">Zipcode: </label>
<input name="zip" class="required" type="text" size="8" />
</p>
<p>
<label for="tel">Phone Number: </label>
<input name="tel" class="required" type="tel" data-mask="(000) 000-0000" placeholder="(xxx) xxx-xxxx" size="10" />
</p>
<p>
<label for="dob">DOB: </label>
<input name="dob" type="date" class="required" id="datepicker" size="15" />
</p>
<p>
<label for="email">Email: </label>
<input name="email" type="email" class="required" size="15" />
</p>
<p>
Message:</p>
<p><textarea name="comment" required rows="4" cols="50">
</textarea>
</p>
<input class="submit" type="submit" value="Submit"/>
</form>
</body>
</html>
当我删除下面的代码时，我的验证会返回。任何想法都会很棒！
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 1,
maxDate: -1,
showButtonPanel: true
});
});
</script>
答案 0 :(得分：1)
你有jQuery.js包括3次。
每次加载它都会覆盖以前的jQuery对象。 任何绑定到前一个对象的插件也将丢失。
您应该看到validate因此而无法发挥作用的错误。
另请注意，您多次加载jquery.validate。
仅在所有插件和相关代码
之前加载jQuery.js一次....答案 1 :(得分：0)
我认为由于多个jQuery库导入导致问题与$冲突有关。
注意加载缩小版本后jQuery库的两个导入。
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
和
<script src="//code.jquery.com/jquery-1.10.1.js"></script>
删除它们应该有帮助。
此外，建议您将$.noConflict()添加到使用jQuery相关功能的代码的script部分 - 即datepicker和validator
<script>
$.noConflict();
jQuery(function() {
jQuery("#datepicker").datepicker({
numberOfMonths: 1,
maxDate: -1,
showButtonPanel: true
});
});
</script>