如何在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');
    }
});

演示小提琴