Question

下面的代码对我来说很好。虽然我已添加 onkeyup：true 选项，但仅在提交时验证表单。我该如何解决这个问题？

<!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。下面的站点会动态执行vaidation（onkeyup），但我不明白他们如何将相同的逻辑转换为我的代码：

Answer 1

我找到了答案：

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

标签ID，输入ID和输入名称应该相同 - “email”。输入类型=“文本”也应该写。

但这不是真正的答案，尽管没有我上面指出的项目，但它的工作正常：

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

所以我还在等待帮助。

jQuery插件：验证 - 关键启动验证不起作用

1 个答案: