jQuery Validate: change behaviour of error placement

Question

I have a form with ratable options as radio buttons. What I am trying to achieve is the following:

• If an option has not been rated, I want the parent div "option-group" to have a red border. Once the option has been rated, I want the red border to disappear. So far, I have not found a solution.

• If the error message is visible and all required fields have been filled out, then I want the error message to disappear immediately.

Here comes the fiddle: http://jsfiddle.net/a05jrdau/9/

Here comes my code:

HTML

<form id="my-form" action="" method="post">
    <div id="msg-error"></div>
    <input type="text" id="myInput" name="myInput"/>
    <div class="option-con">
        <div class="option-label">
            Option 1
        </div>
        <div class="option-row">
            <input type="radio" name="radioOption1" value="1"/> 1
            <input type="radio" name="radioOption1" value="2"/> 2
            <input type="radio" name="radioOption1" value="3"/> 3
        </div>
    </div>
    <div class="option-con">
        <div class="option-label">
            Option 2
        </div>
        <div class="option-row">
            <input type="radio" name="radioOption2" value="1"/> 1
            <input type="radio" name="radioOption2" value="2"/> 2
            <input type="radio" name="radioOption2" value="3"/> 3
        </div>
    </div>
    <br>
    <br>
    <input type="submit" value="Test" />
</form>

CSS:

.option-con {
    width: 100%;
    float: left;
}

.option-label, .option-row {
    float: left;
}

.option-row {
    margin-left: 10px;
}

.error {
    border: 1px solid red;
}

JS:

jQuery(function ($) {
    $('#my-form').validate({
                debug: true,
                rules: {
                    myInput: {
                        required: true
                    },
                    radioOption1: {
                        required: true
                    },
                    radioOption2: {
                        required: true
                    }
                },
                invalidHandler: function (event, validator) {
                    if (validator.errorList.length > 0) {
                        $('#msg-error').empty().html('Please fill in required fields.').show();

                    } else {
                        $('#msg-error').hide();
                    }
                },
                errorClass: "error"
            }
    )});

Answer 1

You simply need to conditionally target the parent when the input element is a radio. Use the highlight and unhighlight callback functions to over-ride the default behavior.

highlight: function (element, errorClass, validClass) {
    var target;
    if ($(element).is(':radio')) {
        target = $(element).parent('div');
    } else {
        target = $(element);
    };
    target.addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
    var target;
    if ($(element).is(':radio')) {
        target = $(element).parent('div');
    } else {
        target = $(element);
    };
    target.addClass(validClass).removeClass(errorClass);
},

Working DEMO: http://jsfiddle.net/a05jrdau/10/

Also note that, to suppress the error messages, you should put a return false inside of the errorPlacement callback function rather than leaving it empty.

errorPlacement: function (error, element) {
    return false;
},

You also do not need errorClass: "error" as "error" is the default setting.

---

EDIT:

Your error message is not clearing on a valid form because you're trying to do that within the invalidHandler, which only fires when the form is invalid AND you click the button. invalidHandler can never clear the error message because it is never called when the form is valid or by any other triggering event.

You would use the showErrors callback instead...

showErrors: function (errorMap, errorList) {
    var msgerror = "All fields are required.";
    if (this.numberOfInvalids() > 0) {
        $('#msg-error').empty().html(msgerror).show();
    } else {
        $('#msg-error').hide();
    };
    this.defaultShowErrors();
},

DEMO 2: http://jsfiddle.net/a05jrdau/14/