5

我正在使用 jquery 和 validate 来验证我的表单。我没有向缺少的字段添加元素，而是使用此选项 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
            });
4

2 回答 2

7

您可以尝试将此添加到您的.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。我也不会使用table布局，使用 CSS。

于 2012-08-28T15:47:26.530 回答
0 
<form id="signupForm">
    <div class="form-group">
        <label for="contact">Your Name <em>(required)</em></label>
        <input type="text" class="form-control" id="contact" name="contact" placeholder="Name" required>
    </div>
</form>

$('#serviceForm').validate({
    errorPlacement: function (error, element) {
        element.parent().addClass("hasError");
    },
    success: function (error, element) {
        $(element).parent().removeClass("hasError");
    }
})
于 2021-11-25T13:59:13.427 回答