如何在使用jquery validate和自定义errorPlacement时清除错误

Question

我正在使用jquery并验证以验证我的表单.我没有向缺少的字段添加元素,而是使用此选项errorPlacement为元素添加边框

$("#signup-form").validate({
       submitHandler: function(form) {
      form.submit();
   },
   errorPlacement: function(error, element) {
      element.css("border", "solid 1px red");
   }                    
});

我似乎无法弄清楚的一件事是如何在有效时清除它？

所以我从上面的代码开始.然后尝试了,我对结果感到困惑.如果我success:在字段失败时没有该选项,则成功添加该类.但是只要我添加success选项,所有必需的字段都会获得该类,如果我检查元素,我会看到<input class="required invalid valid">我正在做错误的事情.

           $("#signup-form").validate({
                submitHandler: function(form) {
                    // do other stuff for a valid form
                    //form.submit();
                },
                errorPlacement: function(error, element) {
                    element.addClass("invalid");
                },        
                success: function(error) {
                    // change CSS on your element(s) back to normal
                },                    
                 debug:true
            });

Answer 1

您可以尝试将此添加到您的.validate()选项列表中......

success: function(error) {
    // change CSS on your element(s) back to normal
}

这应该动态地工作而不提交表单.一旦错误得到解决,包含的代码就会运行.

见文档.

请使用jsFiddle创建问题演示.这是一个空白的jsFiddle,.validate()已经包含在内并准备好使用.

编辑

根据OP的jsFiddle,我做了这些改变......

    errorPlacement: function(error, element) {
        $(element).filter(':not(.valid)').addClass("invalid");
    },
    success: function(error) {
        console.log(error);
        $("#signup-form").find('.valid').removeClass("invalid");
    }

工作演示: http ://jsfiddle.net/u3Td3/6/

附注: 您还遇到了一些HTML问题.你应该input用你的元素"自我关闭" />.提交按钮也是一样,自我关闭而不是使用</input>.请参阅validator.w3.org以验证您的HTML.我也不会使用tablefor布局,使用CSS.