jQuery驗證插件沒有驗證元數據

我有一個用戶輸入（名，姓，電子郵件）的基本表單設置。我有jQuery和驗證插件正確導入。我的驗證的配置是這樣的：jQuery驗證插件沒有驗證元數據

$(document).ready(function() { 
    $("#form").validate({meta: "validate"}); 
});

據對，可以發現here和here插件文件，這應該意味着我可以添加細節到每個輸入我想驗證。因此，我有：

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0"> 
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1"> 
<input type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address.', email:'Please enter a valid email address.'}}}" id="em2">

這些都有自己的標籤，我省略了。

我的CSS是設置這樣的：

label.error { 
    color: red; 
    font-weight: bold; 
}

當窗體上的點擊與所有三個領域提交空白，名字和姓氏顯示紅色的錯誤消息的預期（Please enter your first name.和Please enter your last name.分別但是經過。，電子郵件沒有出現任何錯誤信息，如果我把一個無效格式的電子郵件地址，我仍然沒有收到任何信息，我已經搜索了一段時間，並閱讀了文檔，但我似乎無法查明這可能會失敗

謝謝

注意： ID和名稱已被編輯爲簡單從我的源代碼。

來源

2012-08-12 brazilianldsjaguar

這jQuery的驗證插件您使用的？ – gmaliar 2012-08-12 09:50:37

我猜你正在使用驗證，關閉jQuery網站，你是否也添加了這個腳本？你有包括嗎？ http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js – gmaliar 2012-08-12 09:58:53

我編輯了我的問題以反映我正在談論的插件。這是「勉強」的一個。 – brazilianldsjaguar 2012-08-14 20:05:58

您可能只需將該類設置爲「必需的電子郵件」而不是當前的驗證選項配置。這裏是適用於我的修改的演示代碼：

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn0"> 
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln1"> 
<input type="text" name="em" value="" class="required email" id="em2">

javascript和css保持不變。

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#form").validate({meta: "validate"}); 
}); 
</script> 
<style type="text/css" media="screen"> 
    label.error { 
    color: red; 
    font-weight: bold; 
} 
</style>

驗證規則針對表單字段的每個類集運行，並且將顯示每個規則的標準錯誤。在這個例子中，首先運行「必需」規則，並顯示錯誤說「此字段是必需的」，一旦字段不爲空，將運行「電子郵件」驗證規則，直到字段值與規則測試的電子郵件格式相匹配。

如果你想上的錯誤消息的進一步控制，你可以通過在「驗證」函數調用像這樣更多的配置：

$("#form").validate({ 
     rules: { 
     fn: "required", 
     ln: "required", 
     em: { 
      required: true, 
      email: true 
     } 
     }, 
     messages: { 
     fn: "Please specify your first name", 
     ln: "Please specify your last name", 
     em: { 
      required: "We need your email address to contact you", 
      email: "Your email address must be in the format of [email protected]" 
     } 
     } 
    });

來源

2012-08-19 11:35:13 Rohit

這就像一個魅力，這正是我正在尋找。謝謝！ – brazilianldsjaguar 2012-08-21 17:30:17

@MattJohnson，我的答案呢？它不工作？它已經贏得了大多數贊同 – 2012-08-22 10:18:05

@blasteralfred，我覺得雖然你的答案肯定是一個解決辦法，但我希望避免實施進一步的驗證功能，而是根據文檔說明它可以基於類使用它。你的答案是100％有效，但不是我想要的方法。謝謝你！ – brazilianldsjaguar 2012-08-22 18:21:35

我以前有過使用此插件的經驗。據我所知，試試這個，

<script id="demo" type="text/javascript"> 
jQuery(document).ready(function($) { 
    var validator = $("#your_form_id").validate({ 
     rules: { 
      fn: "required", 
      ln: "required", 
      em: { 
       required: true, 
       email: true, 
      }, 
     }, 
     messages: { 
      fn: "Please enter your first name.", 
      ln: "Please enter your last name.", 
      em: { 
       required: "Please enter your email address.", 
       email: "Please enter a valid email address.", 
      }, 
     }, 
     errorPlacement: function(error, element) { 
       error.appendTo(element.parent().next()); 
     }, 
     success: function(label) { 
      label.html("OK").addClass("checked"); 
     } 
    }); 
}); 
</script>

而在你的HTML中;

<input type="text" name="fn" value="" class="required" title="Please enter your first name." id="fn"><span class="status"></span><br> 
<input type="text" name="ln" value="" class="required" title="Please enter your last name." id="ln"><span class="status"></span><br> 
<input type="text" name="em" value="" class="required" id="em"><span class="status"></span><br>

這將顯示錯誤信息到<span class="status">附近的相應輸入元素。同樣使用CSS設計你的success和error消息;

#your_form_id label.error { 
    background:url("error.png") no-repeat 0px 0px; 
    color: #CC0000; 
} 
#your_form_id label.checked { 
    background:url("checked.png") no-repeat 0px 0px; 
    color: #008000; 
} 
#your_form_id .success_msg { 
    color: #008000; 
}

如果你仍然想使用Meta，下面是完整的代碼，工作對我罰款

<head> 
<script src="jquery-1.6.1.js" type="text/javascript"></script> 
<script src="jquery.validate.js" type="text/javascript"></script> 
<script src="jquery.metadata.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#commentForm").validate({meta: "validate"}); 
}); 
</script> 
</head> 
<body> 
<form id="commentForm" method="post" action="test.php"> 
<input id="fn0" type="text" name="fn" value="" class="required" title="Please enter your first name."><br /> 
<input id="ln1" type="text" name="ln" value="" class="required" title="Please enter your last name."><br /> 
<input id="em2" type="text" name="em" value="" class="{validate:{required:true, email:true, messages:{required:'Please enter your email address', email:'Please enter a valid email address'}}}"/><br /> 
<input class="submit" type="submit" value="Submit"/> 
</form> 
</body>

希望這有助於。

來源

2012-08-15 06:40:25

同意這是一個可行的解決方案，但不是「元」應該工作？閱讀文檔，你的方法是有效的，對於功能我可以直接實現它，但它不能解釋爲什麼第一種方法*沒有工作。 – brazilianldsjaguar 2012-08-15 17:17:30

它可能無法在'class'屬性上工作。你在哪裏見過？ – 2012-08-15 17:21:20

這個頁面（在這裏）（http://docs.jquery.com/Plugins/Validation/validate），大約在它說「Meta」的頁面的中間 - 它包括一個演示和一個例子。 – brazilianldsjaguar 2012-08-15 19:05:37

Meta可以與已存在的驗證方法一起使用，正如您正確地爲名字和姓氏字段所做的那樣。（通過元素的薈萃多個規則）在這種情況下，你失去指定自己的錯誤的能力：要添加自己的驗證方法，使用這樣的事情：

$.validator.addMethod('own_method_name', function(value, element){ 
    var matches = value.match(/[ a-z0-9?%-]+/gi); 
    return matches.length > 0 && matches[0] == value; 
}, 'Default error message');

和：

<input type="text" name="em" value="" class="required email own_method_name" id="em2">

注意消息並且只能使用默認的消息。

來源

2012-08-16 13:59:02

jQuery驗證插件沒有驗證元數據

回答

相關問題