jquery验证插件不工作在jquery ui自定义对话框

-1

我使用此链接上给出的validate.js库http://jzaefferer.github.io/jquery-validation/jquery.validate.js验证使用Jquery自定义对话框所做的弹出窗体的文本字段。jquery验证插件不工作在jquery ui自定义对话框

每当我在提交按钮点击，我不断收到“验证没有定义”错误。我不明白什么是错我的代码..

我想要的插件来验证给出的所有领域在弹出的形式...

请帮助..

代码..

<!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>

来源

2013-05-04 Lucy

报价OP：

我总是收到错误“验证未定义”。

这听起来像你没有正确包括验证插件脚本：

<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

来源

2013-05-04 14:13:21 Sparky

试过你recommended.As你可以看到的变化发布在问题中的代码已经包含type =“text/javascript”.D我需要将它添加到其他地方？即使在进行上述编辑之后，如更改js文件的URL并使

此外，我还没有添加任何自定义错误消息和他们的CSS属性，如果所需的领域没有填写。我需要添加他们或他们自动添加插件？ – Lucy 2013-05-06 04:31:17

@Lucy，你非常清楚地在''jquery'，'jquery-ui'或'jquery-validate'的'

jquery验证插件不工作在jquery ui自定义对话框

回答

相关问题