jQuery plugin: Validation- labels are getting hidden

Question

I use the following code of jQuery plugin: Validation:

<!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>

It works well but there are two problems:

Labes are getting hidden when I submit for with errors, correct errors and resubmit the form. Is this case the fileds that were corrected lose their lable (the plugin puts display:none CSS property). It seams that this pugin mixes the original label with the error labes, and hides them when there is no error. How to fix this?
Why for tesxtarea field when I correct the error, it immediately changes the class to success(which means it was corrected), while for input fileds I should resubmit the form so that the plugin start to validate?

Narek · Accepted Answer

The code below solves the problem. Concerning to the item 2 refere please to this link: jQuery plugin: Validation - validation on key up does not work

<!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>

jQuery plugin: Validation- labels are getting hidden

Tags:

jquery

validation

jquery-plugins

Narek

1 Answers

Narek

Recent Activity

Donate For Us

jQuery plugin: Validation- labels are getting hidden

Tags:

jquery

validation

jquery-plugins

Narek

1 Answers

Narek

Related questions

Recent Activity

Donate For Us