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自定義對話框

回答

相關問題