-1

我正在使用此链接http://jzaefferer.github.io/jquery-validation/jquery.validate.js上给出的 validate.js 库来验证使用 Jquery 自定义对话框制作的弹出表单的文本字段。

每当我单击提交按钮时，我都会收到错误“验证未定义”..我无法理解我的代码有什么问题..

我希望插件验证弹出表单中给出的所有字段...

请帮忙..

代码..

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"> </script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type= text/javascript>
$(function() {
$( "#dialog1" ).dialog({
  autoOpen: false,
  modal: true,
  resizable: false,
  width:800,
  height:800,
  show: {
    effect: "blind",
    duration: 1000
  },
  hide: {
    effect: "explode",
    duration: 1000
  }

});

$( "#opener" ).click(function() {
  $( "#dialog1" ).dialog( "open" );
});
});

$(document).ready(function(){
 $("#dialog").validate();
});

function isNumberKey(evt){  <!--Function to accept only numeric values-->
    //var e = evt || window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode
     if (charCode != 46 && charCode > 31 
&& (charCode < 48 || charCode > 57))
    return false;
    return true;
}   
    </script>
    <style>
     textarea { 
     vertical-align: top; 
      }
     </style>
     </head>
     <body>
     <div id="dia">
      <form name="dialog" method="get" action="">

     <div id="dialog1" title="Upload Details">
     <fieldset>
     <legend><p>Please fill in the follwing Item details to compalete the uploading process.</p></legend><br><br>

     Name: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="cIname"   name="Iname"size="30" placeholder="Item Name"/><br><br>

     <p><div id='ccontactform_category_errorloc' class='err'></div>

 <label for="ccategory"  style="margin-bottom: 90px;margin-top:50px">Category: </label>&nbsp;&nbsp;&nbsp;
     <select id="ccategory" name="category"class="input">
     <option value="0" selected="selected">
     [Choose Category]
     </option>
     <option value="Arts and entertainment">Arts and entertainment</option>
     <option value="Automotive">Automotive</option>
     <option value="Business">Business</option>
     <option value="Computers">Computers</option>
     <option value="Games">Games</option>
     <option value="Health">Health</option>
     <option value="Internet">Internet</option>
     <option value="News and Media">News and Media</option>
     <option value="Recreation">Recreation</option>
     <option value="Reference">Reference</option>
     <option value="Shopping">Shopping</option>
     <option value="Sports">Sports</option>
     <option value="World">World</option>
     </select>
     <div id="choose_own_text"></div>
     </p><br>

     Brand:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="cIbrand" name="Ibrand" size="30" placeholder="Item Brand"/><br><br>

     Price (Rs):&nbsp;&nbsp;  <input type="text" name="price" id="cprice"size="20" placeholder="Enter Price" maxlength="15" onkeypress="return isNumberKey(event)"/> .00 ps<br><br>

    <label for="cIdescrp"  style="margin-bottom: 90px;margin-top:50px">Description:</label>
   <textarea rows="15" cols="40" id="cIdescrp" name="Idescrp"style="resize: none;overflow:auto" onkeypress=""></textarea><br><br>

    Mobile No:&nbsp;&nbsp;  <input type="text" name="Num" id="cNum"size="20" placeholder="Enter Valid Number" maxlength="10" onkeypress="return isNumberKey(event)"/> <br><br>




   <button id="Submit" onclick="validate()">Submit Details</button>

   </fieldset>
    </div>

    </form>
     <button id="opener">Open Dialog</button>

    </div>
   </body>
   </html>
4

1 回答 1

2

引用操作：

我不断收到错误“验证未定义”。

听起来您没有正确包含验证插件脚本：

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"> </script>

为此，请使用开发人员提供的 CDN 链接，而不是直接链接到 Github 文件：

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js

还包括type="text/javascript"使其成为有效的 HTML：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

当然，您的 jQuery 选择器目标$("#dialog"), 是不正确的。哈希 ,#正试图定位一个id不存在的对象。

要么添加id="dialog"到您的form标签...

<form id="dialog" name="dialog" method="get" action="">

或更改您的选择器以通过其name属性定位元素...

$('[name="dialog"]').validate();

你的代码：

<button id="Submit" onclick="validate()">Submit Details</button>

不要使用内联 JavaScript。使用 jQuery，内联 JavaScript 是丑陋和过时的。在这种情况下，没有实际需要.validate()再次调用。这是插件的初始化，只需要在 DOM 就绪时调用一次；你已经这样做了。

用这个：

<button id="Submit">Submit Details</button>

有关如何声明规则，请参见下面的演示。在演示中，我使用了您的代码并应用于required第一个字段。字段由name属性标识。要制作select列表required，第一option项必须包含value="".

工作演示：

http://jsfiddle.net/aqJVm/

我强烈建议您彻底查看文档：

http://docs.jquery.com/Plugins/Validation

于 2013-05-04T14:13:21.853 回答