jquery validation plugin. error element is not being removed with remote rule (all working without remote rule)

Question

Check this fiddle:http://jsfiddle.net/8b32e/

All working fine there. It validate fields. Check if digits, check if blank. If invalid error label appears, if valid it is disappears.

$("input").each(function () {
    $(this).rules("add", {
        required: true,
        digits: true,
        messages: {
            required: 'It is required',
            digits: 'Only digits can be there'
        }
    });
});

If I add remote rule to rule list, error label is appearing, but if field getting valid, only classes message and error are disappearing, but label is still shown (but must be removed). Check this fiddle : http://jsfiddle.net/2LRv7/7/

Block with rules with remoute:

$("input").each(function () {
    var fieldName = $(this).attr('name');
    $(this).rules("add", {
        required: true,
        digits: true,
        remote: {
            url: "/inc/json.php?action=get_last_counter_value",
            type: "post",
            data: {
                id: fieldName
            }
        },
        messages: {
            required: 'It is required',
            digits: 'Only digits can be there',
            remote: 'Fix this please.'
        }
    });
});

What is this?

ADD:
php script from remote url:

    $DBH = connectToDatabase();

    $user_id = $_SESSION['OplataUser_ID'];
    $counter_id = $_POST['id'];
    $newValue = $_POST["".$counter_id.""];

    $params = array();
    $params['user_id'] = $user_id;
    $params['counter_id'] = $counter_id;
    $STH = $DBH->prepare("
        SELECT CounterValue as Value FROM CounterValues
        WHERE 
            UserID = :user_id
        AND 
            UserCounterID = :counter_id
        ORDER BY 
            DateCreate
            DESC
        LIMIT 1
    ");
    $STH->execute($params);

    $lastValue = $STH->fetch(PDO::FETCH_OBJ)->Value;

    if($lastValue > $newValue)
    { $result = "false"; }
    else
    { $result = "true"; }
    print $result;

    $DBH = null;

So this script returns only true or false.

Answer 1

As long as the remote rule receives the proper response from the server, the plugin will automatically toggle the message.

If your PHP result needs validation to fail, do this...

echo 'false';

OR

echo json_encode('some error message');

If your PHP result needs validation to pass, do this...

echo 'true';

---

As per documentation:

"The serverside resource is called via jQuery.ajax (XMLHttpRequest) and gets a key/value pair corresponding to the name of the validated element and its value as a GET parameter. The response is evaluated as JSON and must be true for valid elements, and can be any false, undefined or null for invalid elements, using the default message; or a string, eg. "That name is already taken, try peter123 instead" to display as the error message."

---

Your second jsFiddle is totally broken, not by the remote method, but by the code within your errorPlacement callback.

Removing the errorPlacement callback, or putting back to its default, at least gets the plugin working again:

http://jsfiddle.net/c5xZL/

---

Instead of creating br elements with jQuery to place the label, just use the errorElement: "div" option and that will change the label into a div and it will naturally appear under the input because a div is a block. This way, you can avoid the errorPlacement option entirely.

errorElement: "div"

Answer 2

Is this what you needed? http://jsfiddle.net/YHF3b/

I just changed .removeClass(errorClass).removeClass('message');

to .removeClass(errorClass).remove()

actually just .remove() would suffice

Answer 3

Your issue is on the unhighlight event, you're only removing the class instead of removing the label.

Replace

   $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass).removeClass('message');

with

$(element.form).find("label[for=" + element.id + "]").remove();