2012-03-18 134 views
0

下面的代碼適合我。只有表單正在驗證提交,但我已經添加onkeyup:真選項。我怎樣才能解決這個問題?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-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
div.formerror 
{ 
    color: red; 
    margin-bottom: 6px; 
    margin-top: 1px; 
} 
.error 
{ 
    border: 1px dashed red; 
    background-color: #FFFFD5; 
    margin: 0px; 
    color: red; 
} 
label.errorForLabel 
{ 
    margin: 0px; 
    color: red; 
} 
label.error{ 
    visibility:hidden; 
    width:0; 
    height:0; 
} 
</style> 


<!-- <script src="http://code.jquery.com/jquery-latest.js"></script> --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> 
<script type="text/javascript"> 
var errorClassForLabel = 'errorForLabel'; 
$(document).ready(function(){ 
     $('#edit_form').validate({ 

      errorClass: "error", 

      validClass: "valid", 

      rules: { 
       name: "required", 
       email: { 
        required: true, 
        email: true 
       }, 
       url:{ 
        required: true, 
        url:true 
       }, 
       comment: "required" 
      }, 

      onkeyup: true, 

      highlight: function(element, errorClass, validClass) { 
       $(element).addClass(errorClass).removeClass(validClass); 
       $(element.form).find('[name='+element.name+']').each(function (i, sameName){ 
        $(element.form).find("label[for=" + sameName.id + "]").addClass(errorClassForLabel); 
       }); 
      }, 

      unhighlight: function(element, errorClass, validClass) { 
       $(element).removeClass(errorClass).addClass(validClass); 
       $(element.form).find('[name='+element.name+']').each(function (i, sameName){ 
        $(element.form).find("label[for=" + sameName.id + "]").removeClass(errorClassForLabel); 
       }); 
      }, 

      submitHandler: function(form) { 
       $("#edit_form div.formerror").hide(); 
       alert("validated successfully - submit handler here"); 
      }, 

      invalidHandler: function(e, validator) { 
       var errors = validator.numberOfInvalids(); 
       if (errors) { 
        var message = 'There are missing or invalid fields. They have been highlighted below.'; 
        $("#edit_form div.formerror span").html(message); 
        $("#edit_form div.formerror").show(); 
       } else { 
        $("#edit_form div.formerror").hide(); 
       } 
      } 
     }); 
    }); 

</script> 

</head> 

<body> 
<form class="cmxform" id="edit_form" method="get" action=""> 
    <div class="formerror" style="display: none"> 
     <span></span> 
    </div> 
    <fieldset> 
    <legend>A simple comment form with submit validation and default messages</legend> 
    <p> 
    <label for="cname">Name</label> 
    <em>*</em><input id="cname" name="name" size="25" minlength="2" /> 
    </p> 
    <p> 
    <label for="cemail">E-Mail</label> 
    <em>*</em><input id="cemail" name="email" size="25"/> 
    </p> 
    <p> 
    <label for="curl">URL</label> 
    <em> </em><input id="curl" name="url" size="25" value="" /> 
    </p> 
    <p> 
    <label for="ccomment">Your comment</label> 
    <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea> 
    </p> 
    <p> 
    <input class="submit" type="submit" value="Submit"/> 
    </p> 
    </fieldset> 
</form> 
</body> 

</html> 

P.S.該follwing網站做對飛(的onkeyup)vaidation,但我不明白它們是如何工作在這裏變換相同的邏輯來我的代碼:

  1. http://jquery.bassistance.de/validate/demo/marketo/
  2. http://jquery.bassistance.de/validate/demo/milk/

回答

0

我有找到了答案:

<label for="email">E-Mail</label> 
<em>*</em><input id="email" name="email" type="text" value="" maxlength="150" size="25"/> 

標籤ID,輸入ID和輸入的名稱應該是一樣的 - 「電子郵件」。輸入類型=「文本」也應該寫。

,但是這個卻不亞於這是不是一個真正的答案它的工作原理正確,無我已經指出了上面的項目:

http://jquery.bassistance.de/validate/demo/themerollered.html

所以我仍然等待幫助。