JQuery驗證自定義消息問題與.rules（）

我使用'id'的規則，因爲它給了我更多的靈活性，把它連接到一個django項目主要問題是模型的字段名稱是'名稱'（name =「name」） - 這似乎是JavaScript中的保留字。JQuery驗證自定義消息問題與.rules（）

根據它看起來像什麼，我想做的事是可能的，我幾乎使用精確例子給出這裏的文檔： http://jqueryvalidation.org/rules/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DPlugins%2FValidation%2Frules%26redirect%3Dno#.22add.22rules

問題是我沒有得到任何回自定義的錯誤消息指定，而是我猜默認值正在返回。即。如果輸入了什麼，我會得到默認的錯誤消息回：

「這是必須填寫」

相對於我的自定義消息：

「需要輸入」

如果我輸入1性格我得到：

「請輸入至少2個字符」

相對於我的自定義消息：

「請至少使用{0}個字符」

我運行的是Ubuntu 12.04，在Firefox和Chrome中都看到相同的行爲。

對於JQuery，我幾乎是個新手，所以我希望從我忽略的文檔複製和粘貼時存在一個明顯的問題...任何建議，將不勝感激。

我在下面包含了我的代碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="Content-Language" content="en-us" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>jQuery Example 3</title> 

    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.2.6.js"></script> 
    <script type="text/javascript" language="javascript" src="Scripts/jquery.validate.js"></script> 
    <script type="text/javascript" language="javascript"> 
     //Our validation script will go here. 
     $(document).ready(function(){ 
      // Set up validation based around the id. 
      $("#form1").validate(); 

      $("#fname1").rules("add", { 
       required: true, 
       minlength: 2, 
       messages: { 
        required: "Required input", 
        minlength: jQuery.format("Please, at least {0} characters are necessary") 
       } 
      }); 

      $("#lname1").rules("add", { 
       required: true 
      }); 
     }); 
    </script> 

    <style type="text/css"> 
    #container { 
     width: 350px; 
     height: 8em; 
     border: 1px #009933 solid; 
     background-color:#66FF66; 
     display:block; 
    } 

    label, input{ 
     margin:2px 0px 1px 4px; 
    } 

    label { 
     margin-top:3px; 
     font-family:"Times New Roman", Times, serif; 
     font-size:1.1em; 
    } 
    </style> 
</head> 

<body> 
<div id="container"> 
    <form id="form1"> 
     <label for="fname1">First Name: </label><br /> 
     <input name="txtFirstName" type="text" id="fname1" /><br /> 
     <label for="lname1">Last Name:</label><br /> 
     <input name="txtLastName" type="text" id="lname1" title="Please Enter a Last Name"/><br /> 
     <input type="submit" value="Submit" id="btnSubmit" /> 
    </form> 
</div> 
</body> 
</html>

來源

2013-06-05 jayuu

你的代碼工作正常，我已經測試過它，mabye第二個消息是混亂，你一點點：

如果我輸入一個字符，我得到：

「請輸入至少2個字符「

相對於我的自定義消息：

」請，至少{0}字符necessa RY」

{0}只是一個佔位符，它會得到充滿了minlength所以你讓你自定義消息的值。

我複製/粘貼你的代碼和測試它在不改變任何東西，它似乎很好地工作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="Content-Language" content="en-us" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

    <title>jQuery Example 3</title> 

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script> 
    <script type="text/javascript" language="javascript"> 
     //Our validation script will go here. 
     $(document).ready(function(){ 
      // Set up validation based around the id. 
      $("#form1").validate(); 

      $("#fname1").rules("add", { 
       required: true, 
       minlength: 5,// changed it to 5 just to test the placeholder 
       messages: { 
        required: "You custom message ", 
        minlength: jQuery.format("Please, at least {0} characters are necessary") 
       } 
      }); 

      $("#lname1").rules("add", { 
       required: true 
      }); 
     }); 
    </script> 

    <style type="text/css"> 
    #container { 
     width: 350px; 
     height: 8em; 
     border: 1px #009933 solid; 
     background-color:#66FF66; 
     display:block; 
    } 

    label, input{ 
     margin:2px 0px 1px 4px; 
    } 

    label { 
     margin-top:3px; 
     font-family:"Times New Roman", Times, serif; 
     font-size:1.1em; 
    } 
    </style> 
</head> 

<body> 
<div id="container"> 
    <form id="form1"> 
     <label for="fname1">First Name: </label><br /> 
     <input name="txtFirstName" type="text" id="fname1" /><br /> 
     <label for="lname1">Last Name:</label><br /> 
     <input name="txtLastName" type="text" id="lname1" title="Please Enter a Last Name"/><br /> 
     <input type="submit" value="Submit" id="btnSubmit" /> 
    </form> 
</div> 
</body> 
</html>

來源

2013-06-06 01:00:48 zizoujab

嗨 - 檢查非常感謝！奇怪的是，我只是在第三個瀏覽器中再次嘗試Chromium將此代碼複製並粘貼到另一個新文件中，並且它工作正常......所以我又似乎遇到了正確清除瀏覽器緩存的問題。我希望我知道一些傻瓜證明的方式來檢查這一點。 – jayuu

JQuery驗證自定義消息問題與.rules（）

回答

相關問題