Disabling error messages when using the JQuery validator extension

Question

I've searched around for a way to disable the error messages that are displayed next to invalid form elements and I have only found ways to customize the messages, not prevent them altogether.

I tried:

jQuery.extend(jQuery.validator.messages, {
    required: ""
}

But that still places a blank space next to my text boxes and throws off the positioning. Anyone know a way that I can do this?

manual validation maybe?

Ibu
– Ibu

2011-06-03 06:41:01 +00:00
Commented Jun 3, 2011 at 6:41 — Ibu
– Ibu, Commented Jun 3, 2011 at 6:41

GSerg · Accepted Answer · 2011-06-04 12:58:56Z

4

$('#submit').click(function(){
    $("#contactform").validate({
        errorPlacement: function(error, element) { },
        debug:true
    })
});

leaving the errorPlacement line blank did the trick.

edited Jun 4, 2011 at 12:58

GSerg

78.8k18 gold badges173 silver badges377 bronze badges

answered Jun 3, 2011 at 16:13

Slappy Griddleson

953 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Jensen Over a year ago

+1 - Replacing the validator method with a blank function is a much better solution than hiding the generated error labels.

Mandible79 Over a year ago

This is the proper way to do it, and not overriding errorPlacement as has been suggested in response to similar questions on here.

Matthew Nessworthy · Accepted Answer · 2011-06-03 06:58:25Z

3

You could use CSS to hide them

label.error { display:none; }

It's not a perfect solution, but it'll work

answered Jun 3, 2011 at 6:58

Matthew Nessworthy

1,42810 silver badges19 bronze badges

Comments

Zachary · Accepted Answer · 2011-06-03 16:31:58Z

I created an over-ride of the existing "required" validator to return no error messages.

Over-Ride Required Method:

// Creates the NEW validator method
jQuery.validator.addMethod('requiredNoMsg', jQuery.validator.methods.required, '');

// Creates a new CSS Rule for the validator method
// so we can add it like "class='requriedNoMsg'".
jQuery.validator.addClassRules('requiredNoMsg', { requiredNoMsg: true });

Full Example:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Demo</title>
    <!-- jQuery 1.6.1 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" charset="utf-8"></script>
    <!-- jQuery Validate 1.8.1 -->
    <script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/jquery.validate.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://github.com/jzaefferer/jquery-validation/raw/master/additional-methods.min.js" charset="utf-8"></script>

    <style type="text/css">
        body { margin: 0; padding: 0; font-family: Verdana, Tahoma, Arial, sans-serif; }
        fieldset.main { margin: 1em; padding: 1em; width: 400px; font-size: .9em; }
        fieldset.main ol { padding: 1em 1em 0 1em; list-style: none; }
        fieldset.main li { padding-bottom: .5em; }
        fieldset.main ol li label { display: block; width: 12em; margin-right: 1em; }
        input[type=button] { width: 6em; height: 2.5em; }
        input[type=checkbox] { }
        input[type=text].error { border: 1px dotted red; background-color: yellow;}
    </style>
    <script type="text/javascript">
        jQuery.validator.addMethod('requiredNoMsg', jQuery.validator.methods.required, '');
        jQuery.validator.addClassRules('requiredNoMsg', { requiredNoMsg: true });

        $(document).ready(function () {
            $('#myform').validate(
                {submitHandler: function () { alert('Validation Passed!'); }}
            );
        }); 
        </script>
</head>
<body>
    <form id="myform" method="get" action="">
    <fieldset class="main">
        <ol>
            <li>
                <label for="CustomerCode" class="left">
                    Customer Code</label>
                <input type="text" id="CustomerCode" name="CustomerCode" class="requiredNoMsg" />
            </li>
            <li>
                <label for="DeliveryCode" class="left">
                    Delivery Code</label>
                <input type="text" id="DeliveryCode" name="DeliveryCode" class="requiredNoMsg" />
            </li>
            <li>
                <input type="submit" id="Add" value="Add" />
            </li>
        </ol>
    </fieldset>
    </form>
</body>
</html>

Collectives™ on Stack Overflow

Disabling error messages when using the JQuery validator extension

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related