jQuery驗證：遠程方法

Question

我對jquery驗證插件（特別是遠程方法）有疑問。

假設我有一個checkEmail.php腳本，用於根據數據庫檢查電子郵件地址。 我還使用了required:true和email:true 。 我想在從服務器獲取響應時添加一個微調器，並在完成后將其隱藏。

同時，如果服務器的結果為true我想在電子郵件字段旁邊顯示一個綠色的勾號圖標。

我使用以下代碼：

$('#form').validate({

    rules:  {

        email:  {
            required: true,
            email: true,
            remote: {
                url: 'js/ajax/checkEmail.php',
                type: 'POST',
                data: {
                    email: function() {
                        return $('#email').val();
                    }
                },
                beforeSend: function() {

                    //CODE TO SHOW THE SPINNER
                },
                success:function(output){

                    //CODE TO HIDE THE SPINNER


                    if(output == 'true')
                    {
                        //SHOW GREEN TICK

                    }
                    else
                    {
                        //SHOWS THE CUSTOM ERROR FROM SERVER
                    }

                }
            }
        }
    },
    messages:   {

        email:  {
            required: 'Please enter your email',
            email: 'Please enter a valid email address'
        }
    }
});

說下面的電子郵件地址foo@bar.com在數據庫中。 然后，遠程方法將返回true 。 同時滿足required和email方法。 因此將顯示綠色的勾號。

問題：

如果我不滿足要求的電子郵件方法之一，則錯誤消息將自動顯示，但綠色的勾號將保留。 我曾嘗試使用.valid()后.validate()來檢查時，形式是無效的，然后取出綠色的勾。 它不起作用。

if($('#form').valid())
{
   //REMOVE GREEN TICK : --> NOT WORKING
}

如果表單無效，我可以做些什么來操縱DOM？ 換句話說，我該如何進行這項工作？

提前致謝，

克里斯托斯

Answer 1

在驗證程序的消息部分中，執行與在remote數據相同的操作。 做一個函數或一個匿名函數：

function resetCheck(message)
    {
        // Whatever code you want to use to remove check icon here
        $("#checkmark").remove();
        // Just return the message
        return message;
    }

// Messages part of your validation:
...
messages:   {
        email:  {
            required: resetCheck('Please enter your email'),
            email: resetCheck('Please enter a valid email address')
        }
    }