Question

我正在使用此链接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>

Answer 1

引用OP：

我一直收到错误“验证未定义”。

听起来你没有正确地包含Validate插件脚本：

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

不是直接链接到Github文件，而是使用CDN链接provided by the developer来实现此目的：

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

Jquery Validation插件在Jquery ui自定义对话框中不起作用

1 个答案: