如何在使用jquery验证和自定义错误放置时清除错误

I am using jquery and validate to validate my form. Instead of adding an element to the missing field I am adding a border to the element using this option errorPlacement

我正在使用jquery和validate来验证我的表单。我没有在缺失的字段中添加一个元素，而是使用这个选项errorPlacement向元素添加一个边框。

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

the one thing i can not seem to figure out is how to clear it when valid?

有一件事我似乎弄不明白，那就是如何在有效的时候清除它?

So I started with the above code. Then tried and i am confused with the results. If I do not have the success: option when a field fails it adds the class successfully. But as soon as I add the success option all the required fields are getting that class, and if I inspect the element I see <input class="required invalid valid"> so I am doing something incorrectly.

所以我从上面的代码开始。然后尝试，我对结果感到困惑。如果我没有success:选项，当字段失败时，它会成功地添加类。但是，只要我添加了success选项，所有必需的字段都将获得该类，如果我检查元素，我就会看到，因此我正在做一些不正确的事情。

           $("#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
            });

1 个解决方案

#1

You could try adding this to your list of .validate() options...

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

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

This should work dynamically without a form submit. As soon as the error is resolved, the contained code will run.

这应该在没有提交表单的情况下动态工作。一旦错误被解决，所包含的代码就会运行。

See documentation.

见文档。

Please create a demo of your problem using jsFiddle. Here's a blank jsFiddle with .validate() already included and ready for use.

请使用jsFiddle创建问题的演示程序。这里有一个空白的jsFiddle .validate()已经包含并准备使用。

EDIT

编辑

As per OP's jsFiddle, I made these changes...

根据OP的jsFiddle，我做了这些更改……

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

Working Demo: http://jsfiddle.net/u3Td3/6/

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

Side-notes: You also had some HTML issues. You should "self-close" your input elements with />. Same thing for the submit button, self-close rather than using a </input>. See validator.w3.org to validate your HTML. I'd also not use a table for layouts, use CSS.

附加说明:您还存在一些HTML问题。您应该使用/>“自关闭”输入元素。同样的，提交按钮，self-close，而不是使用。请参阅validator.w3.org来验证HTML。我也不会使用表格来进行布局，使用CSS。

1 个解决方案

#1

更多相关文章

随机推荐