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

});

如您在我的 fiddle 中所见，它可以工作，但我想实现略有不同的效果。我想 - 而不是在字段下方显示错误消息，只需更改它们的 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 */
}

Demo Fiddle

要使按钮仅在表单有效时激活，默认禁用：

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

Demo Fiddle

Answer 2

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

$(".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

Answer 3

您只需要这个：它也有助于自定义错误消息。

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

这是一个DEMO

Answer 4

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

errorPlacement: function (error, element) {
}

如果您没有在此函数回调中指定，您可以处理错误文本标签的显示方式和位置，或者根本不显示。这样标签文字就不会存在于DOM.

然后为"error"添加css class 验证器插件这样添加到控件中-

.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();
    });
});

Fiddle Url- http://jsfiddle.net/xvAPY/228/

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

How can I make the custom css code for invalid values while filling the form in html?

html

javascript

css

jquery

jquery-validate

Demo Fiddle

Demo Fiddle