如何在 html 中填写表单时为无效值制作自定义 css 代码

Question

我正在使用 http://jqueryvalidation.org/中的插件来验证我的表单。html代码很简单：

<form id="myform">  
     <input type="text" name="field1" />  <br/>  
    <textarea maxlength="140" style="resize:none" class="textoxarea" placeholder="zbzbzxcbcx" name="field2"></textarea> 
    <input type="checkbox" name="terms" />x
     <input type="submit" />
</form>

JavaScript是：

$(document).ready(function() {
    $('#myform').validate({ // initialize the plugin
        errorElement: 'div',
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            },
            terms: {
                required: true,
                maxlength: 2
            }
        },
        submitHandler: function(form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});

正如你在我的小提琴中看到的那样，它有效，但我想达到稍微不同的效果。我想 - 而不是在字段下方显示错误消息，只需更改它们的 css 样式，以便当值不符合其要求时 - 每个组件都会得到小的红色边框 （1px）。顺便说一句，有没有办法仅在正确填写上述三个选项时才使按钮处于活动状态？谢谢！

Answer 1

只需使用 CSS：

.textox.error, .textoxarea.error,
.textox.error:focus, .textoxarea.error:focus{
    border:1px solid red; /* add the border to your input */
}
.error[generated=true]{
    display:none!important; /* hide the error message, overriding the inline styling */
}

演示小提琴

若要使按钮仅在表单有效时处于活动状态，请默认禁用它：

<input type="submit" disabled />

然后，在输入值更改时检查表单的验证，如果有效，则启用：

$('#myform').find('input, textarea').on('change', function () {
    var btn = $('#myform').find('input[type=submit]');
    if ($('#myform').valid()) {
        btn.removeAttr('disabled');
    } else {
        btn.attr('disabled', 'disabled');
    }
});

演示小提琴

Answer 2

在验证函数中添加错误放置处理程序，如下所示-

errorPlacement: function (error, element) {
}

如果未在此函数回调中指定，则可以处理错误文本标签的显示方式和位置。这样，DOM 中将不存在标签文本。

然后为"error"类添加css，该类由验证器插件添加到控件中，如下所示-

.error{
    border: 1px solid red !important;
}

更新：
以更简洁的方式处理您的要求的完整代码-

$(document).ready(function () {
    $('input[type="submit"]').attr('disabled', 'disabled');
    var validator = $('#myform ').validate({ // initialize the plugin
        rules: {
            email: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            },
            terms: {
                required: true,
                maxlength: 2
            }
        },
        errorPlacement: function (error, element) {},
        success: function () {
            if(validator.numberOfInvalids() == 0)
            {
                $('input[type="submit"]').removeAttr('disabled');
            }
            else
            {
                $('input[type="submit"]').attr('disabled', 'disabled');
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted '); // for demo
            return false; // for demo
        }
    });
    validator.form();
    $('input[type="checkbox"]').on('click',function(){
        validator.form();
    });
});

小提琴网址- http://jsfiddle.net/xvAPY/228/

Answer 3

您只需要以下内容： 它还将有助于自定义错误消息。

input.error, textarea.error, input.error:focus, textarea.error:focus{
  border:1px solid red;
}
.error[generated=true]{
  color: red;
}

这是一个演示

Answer 4

听起来你想要突出显示选项？

$(".selector").validate({
  highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
  .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
  .removeClass(errorClass);
  }
});

然后将 .errorClass 添加到您的 CSS 中，并定义您希望它的外观。

所有选项都可以在这里找到：http://jqueryvalidation.org/validate