CODEWITHSUNDEEP
jquery-validate
Dman100
Dman100

Reputation: 747

clear error messages next to inputs

I'm using the jquery validation plugin and trying to figure out how I can remove the default error messages next to the inputs on the form.

Here is an example in JSFiddle

I'm display the number of invalid fields in the div at the top and highlighting my input field.

The error message next to the input "This field is required" I want to remove. If the field is valid, I want to add a green tick mark showing the field is successfully validated.

Here is my script I've been toying with:

<script type="text/javascript">

    var j$ = jQuery.noConflict();

    j$(document).ready(function(){
        var validator = j$('[id$=Details]').validate({
            invalidHandler: function() {
                j$("#error-message").html('<img src="{!URLFOR($Resource.event, 'images/error-icon.png')}" width="32" height="32">').append(" Please correct the entries highlighted below. " + validator.numberOfInvalids() + " field(s) are invalid.");
            },
            success: function(label) {
                //label.replaceWith('<img src="{!URLFOR($Resource.event, 'images/success-icon.png')}" width="16" height="16" class="validated">');
            }
        });

        j$('[id$=Email]').rules("add",{
            required: true,
            email: true
        }); 
    });
</script>

Does this help explain? Thanks.

Upvotes: 0

Views: 2436

Answers (1)

Sparky
Sparky

Reputation: 98738

By default, the jQuery Validate plugin already automatically shows and clears errors dynamically, so maybe you're making this more complicated than it needs to be. Without seeing your HTML or fully knowing why you're taking your approach, this is a generic example that will point you in the right direction.

This can easily be modified to display checkmarks instead of background colors.

jsFiddle Demo

HTML:

​<form>
    <input type="text" name="myfield" />
    <br/><br/>
    <input type="submit" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery:

$(document).ready(function(){

    $('form').validate({
        rules: {
            myfield: {
                required: true,
                email: true
            }
        }
    });

});​

CSS:

.valid {
    background-color: green;
}
.error {
    background-color: red;
}​​​

EDIT: as per OP's jsFiddle

Change .replaceWith() to .html() and clear out the #error-message div on success, and .insertAfter(element) to place the check-mark next to the element. And finally, add return false to the errorPlacement: function to block placing any errors at all.

success: function(label, element) {
    label
        .html(
            '<img src="images/success-icon.png" width="16" height="16" class="validated">'
        )
        .insertAfter(element);
    j$("#error-message").text('');
},
errorPlacement: function(error, element) {
    return false;
},

Working demo: http://jsfiddle.net/jJsSG/34/

Upvotes: 2

Related Questions