Jquery Datepicker 工作，但验证消失答案

【问题标题】：Jquery Datepicker works but verification goes awayJquery Datepicker 工作，但验证消失
【发布时间】：2015-09-14 20:35:44
【问题描述】：

我有一个任务，但我遇到了一个我无法解决的问题。我添加了 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:&nbsp;</label>
                  <input name="fname" class="fname" type="text"  size="15" />
        </p>
         <p>
             <label for="lname">Last Name:&nbsp;</label>
                  <input name="lname" class="required" type="text"  size="15" />
        </p>
         <p>
             <label for="street">Street Address:&nbsp;</label>
                  <input name="street" class="required" type="text" pattern="[a-zA-Z0-9\s]+" size="20" />
        </p>
         <p>
             <label for="city">City:&nbsp;</label>
                  <input name="city" class="required" type="text" pattern="[a-zA-Z0-9\s]+" size="15" />
        </p>
                 <p>
                       <label for="state">State:&nbsp;</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:&nbsp;</label>
                  <input name="zip" class="required" type="text" size="8" />
                     </p>

                     <p>
                         <label for="tel">Phone Number:&nbsp;</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:&nbsp;</label>
                  <input name="dob" type="date" class="required" id="datepicker" size="15" />
                     </p>
                     <p>
                         <label for="email">Email:&nbsp;</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>

【问题讨论】：

浏览器控制台有错误提示吗？
我收回，TypeError: $.validator is undefined Assignment3.html:97:3 TypeError: $(...).validate is not a function Assignment3.html:36:0跨度>
jsfiddle.net/jkozla01/z0pk7pk4 这是链接，日期选择器有效，没有别的。玩帮我

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

您已包含 3 次 jQuery.js。

每次加载它都会覆盖之前的 jQuery 对象。任何绑定到前一个对象的插件也将丢失。

因此，您应该看到 validate 不是函数的错误。

另请注意，您正在多次加载 jquery.validate。

只加载一次 jQuery.js....在所有插件和依赖代码之前

【讨论】：

当我删除了所有内容并且只有最新的 jquery 没有任何效果
如果 jQuery UI 版本兼容并且您在所有其他依赖代码之前加载 jQuery.js 应该可以正常工作。抛出什么错误？
来自 jQuery UI 文档。一般最好不要使用latest，老实说使用已知版本
任何想法然后使用什么

【解决方案2】：

我认为问题在于由于多个 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>

【讨论】：

还有第三个来自 CDN 的jquery-latest.min.js
$.noConflict(); 删除 $ 别名并使其未定义。没必要
我应该有一个特定的 jquery 吗？
来自 CDN 的 jquery-latest.min.js 就足够了。
当我删除了所有内容并且只有最新的 jquery 没有任何效果