【问题标题】：jQuery validation: remote methodjQuery 验证：远程方法
【发布时间】：2016-04-02 22:20:12
【问题描述】：

我有一个关于 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 方法。所以会显示绿色的勾号。

问题：

如果我不满意其中一种必需的电子邮件方法，则会自动显示错误消息，但绿色勾号将保留。我尝试在.validate() 之后使用.valid() 来检查表单何时无效，然后删除绿色勾号。它不工作。

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

如果表单无效，我可以做些什么来操作 DOM？换句话说，我怎样才能做到这一点？

提前致谢，

克里斯托斯

【问题讨论】：

在success函数的else部分隐藏tic？
我认为这行不通，因为 else 部分位于远程方法中，如果满足所需的方法和电子邮件方法，则会激活该方法。

标签： javascript php jquery validation email

【解决方案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')
        }
    }

【讨论】：