Fatal编程技术网
  • jquery/
  • jQuery插件：验证-标签被隐藏

jQuery插件：验证-标签被隐藏

jquery jquery-plugins validation

jQuery插件：验证-标签被隐藏,jquery,jquery-plugins,validation,Jquery,Jquery Plugins,Validation,我使用以下代码： 无标题文件 div.formerror { 颜色：红色； 边缘底部：6px； 页边顶部：1px； } input.error、select.error、label.error { 边框：2倍纯红； 背景色：#FFFFD5； 边际：0px； 颜色：红色； } $（文档）.ready（函数（）{ $（“#编辑表格”）。验证({ 规则：{ chooseMe：“必选” }, 信息：{ chooseMe:“ }, 信息：{ 名称：“名称丢失”， 电邮：{ 必需：“缺少电子邮件地址”，

我使用以下代码：


无标题文件
div.formerror
{
颜色：红色；
边缘底部：6px；
页边顶部：1px；
}
input.error、select.error、label.error
{
边框：2倍纯红；
背景色：#FFFFD5；
边际：0px；
颜色：红色；
}
$（文档）.ready（函数（）{
$（“#编辑表格”）。验证({
规则：{
chooseMe：“必选”
},
信息：{
chooseMe:“
},
信息：{
名称：“名称丢失”，
电邮：{
必需：“缺少电子邮件地址”，
电子邮件：“您的电子邮件地址无效”
}
},
突出显示：函数（元素、errorClass、validClass）{
$（元素）.addClass（错误类）.removeClass（有效类）；
$（element.form）.find（'[name='+element.name+']'）。每个（函数（i，sameName）{
$（element.form）.find（“label[for=“+sameName.id+”]”）addClass（errorClass）；
});
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.removeClass（错误类）.addClass（有效类）；
$（element.form）.find（'[name='+element.name+']'）。每个（函数（i，sameName）{
$（element.form）.find（“label[for=“+sameName.id+”]”）removeClass（errorClass）；
});
},
submitHandler:函数（表单）{
$（“#编辑_form div.formerror”）.hide（）；
警报（“已成功验证-在此提交处理程序”）；
},
invalidHandler:函数（e，验证器）{
var errors=validator.numberOfInvalids（）；
如果（错误）{
var message='缺少或无效字段。它们已在下面突出显示'；
$（“#编辑_form div.formerror span”）.html（消息）；
$（“#编辑#form div.formerror”）.show（）；
}否则{
$（“#编辑_form div.formerror”）.hide（）；
}
}
});
});
带有提交验证和默认消息的简单注释表单

名称
*



电子邮件
*



统一资源定位地址



你的评论
*
它运行良好，但存在两个问题：

  • 当我提交带有错误、更正错误并重新提交表单时，标签被隐藏。在这种情况下，被更正的文件失去了标签（插件放置display:nonecss属性）。很明显，这个pugin将原始标签与错误标签混合，并在没有错误时隐藏它们。如何解决这个问题
  • 为什么对于tesxtarea字段，当我更正错误时，它会立即将类更改为success（这意味着它已更正），而对于输入文件，我应该重新提交表单，以便插件开始验证
    • 下面的代码解决了这个问题。关于第2项，请参考此链接： 

    
无标题文件
div.formerror
{
颜色：红色；
边缘底部：6px；
页边顶部：1px；
}
.错误
{
边框：1px红色虚线；
背景色：#FFFFD5；
边际：0px；
颜色：红色；
}
label.errorForLabel
{
边际：0px；
颜色：红色；
}
标签错误{
可见性：隐藏；
宽度：0；
身高：0；
} 
var errorClassForLabel='errorForLabel'；
$（文档）.ready（函数（）{
$（“#编辑表格”）。验证({
errorClass:“错误”，
validClass:“有效”，
规则：{
名称：“必需”，
电邮：{
要求：正确，
电子邮件：真的
},
网址：{
要求：正确，
网址：true
},
评论：“必需”
},
/*是的*/
突出显示：函数（元素、errorClass、validClass）{
$（元素）.addClass（错误类）.removeClass（有效类）；
$（element.form）.find（'[name='+element.name+']'）。每个（函数（i，sameName）{
$（element.form）.find（“label[for=“+sameName.id+”]”）addClass（errorClassForLabel）；
});
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.removeClass（错误类）.addClass（有效类）；
$（element.form）.find（'[name='+element.name+']'）。每个（函数（i，sameName）{
$（element.form）.find（“label[for=“+sameName.id+”]”）。removeClass（errorClassForLabel）；
});
},
submitHandler:函数（表单）{
$（“#编辑_form div.formerror”）.hide（）；
警报（“已成功验证-在此提交处理程序”）；
},
invalidHandler:函数（e，验证器）{
var errors=validator.numberOfInvalids（）；
如果（错误）{
var message='缺少或无效字段。它们已在下面突出显示'；
$（“#编辑_form div.formerror span”）.html（消息）；
$（“#编辑#form div.formerror”）.show（）；
}否则{
$（“#编辑_form div.formerror”）.hide（）；
}
}
});
});
带有提交验证和默认消息的简单注释表单

名称
*

    

电子邮件
*

    

统一资源定位地址

    

你的评论
*

    


    

    <!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;
}
input.error, select.error, label.error
{
    border: 2px solid red;
    background-color: #FFFFD5;
    margin: 0px;
    color: red;
}
</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">

 $(document).ready(function(){
        $('#edit_form').validate({
            rules: {
                chooseMe: "required"
            },
            messages: {
                chooseMe: ""
            },

            messages: {
                name: "Name is missing",
                email: {
                    required: "E-mail address is missing",
                    email: "Your email address is not valid"
                }
            },


            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(errorClass); 
                });
            },
            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(errorClass); 
                });
            },
            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" class="required" minlength="2" />
    </p>
    <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
    </p>
    <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="phone" value="" />
    </p>
    <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
    </p>
    <p>
     <input class="submit" type="submit" value="Submit"/>
    </p>
    </fieldset>
</form>
</body>

</html>

    <!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="name">Name</label>
     <em>*</em><input type="text" id="name" name="name" size="25" minlength="2" />
    </p>
    <p>
     <label for="email">E-Mail</label>
     <em>*</em><input type="text"  id="email" name="email" value="" maxlength="150"  size="25"/>
    </p>
    <p>
     <label for="url">URL</label>
     <em>  </em><input type="text" id="url" name="url" size="25" value="" /> 
    </p>
    <p>
     <label for="comment">Your comment</label>
     <em>*</em><textarea id="comment" name="comment" cols="22"></textarea>
    </p>
    <p>
     <input class="submit" type="submit" value="Submit"/>
    </p>
    </fieldset>
</form>
</body>

</html>