jQuery插件:验证-按键验证不起作用
下面的代码对我来说很好.尽管我添加了 onkeyup:true 选项,但提交时仅验证表单.我该如何解决?
The code below works fine for me. Only form is being validated on submit, though I have added onkeyup: true option. How can I fix this?
<!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.后面的站点可以即时验证(onkeyup),但我不了解它们如何将此处的相同逻辑转换为我的代码:
P.S. The follwing sites do vaidation on the fly (onkeyup), but I don't understand how they work to transform the same logic here to my code:
- http://jquery.bassistance.de/validate/demo/marketo/
- http://jquery.bassistance.de/validate/demo/milk/
- http://jquery.bassistance.de/validate/demo/marketo/
- http://jquery.bassistance.de/validate/demo/milk/
我找到了答案:
<label for="email">E-Mail</label>
<em>*</em><input id="email" name="email" type="text" value="" maxlength="150" size="25"/>
标签ID,输入ID和输入名称应相同-电子邮件".输入type ="text"也应写成.
label id, input id and input name should be the same - "email". Input type="text" also should be written.
但这不是真正的答案,但在没有我上面指出的问题的情况下,它仍然可以正常工作:
BUT THIS IS NOT THE A REAL ANSWER as much as here it works correct without the item I have pointed out above:
http://jquery.bassistance.de/validate/demo/themerollered.html
所以我仍然在等待帮助.
So I still wait for a help.