在html表单中填写表格时，如何使自定义CSS代码无效？

Question

I'm using the plugin from http://jqueryvalidation.org/ to validate my form. The html code is simple:

<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>

and the javascript is:

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

});

It works, as you can see in my fiddle , but I would like to achieve slightly different effect. I would like to - instead of showing the error message below the fields, just change their css style, so that when the value doesn't meet its requirements - each component will get the small red border (1px). Btw, is there a way to make the button active only when the three options above are filled properly? Thanks!

Answer 1

Simply use the 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

To make the button active only when the form is valid, disable it by default:

<input type="submit" disabled />

Then, check validation of the form when an input value changes, and enable if valid:

$('#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

Add the error placement handler in the validate function like below-

errorPlacement: function (error, element) {
}

You can handle how and where the error text label should be displayed or not be displayed at all, if you don't specify in this function callback. In this way the label text will not exist in the DOM.

And then add the css for the "error" class which is added to the control by the validator plugin like this-

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

Update:
The complete code for the cleaner way to handle your requirements-

$(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/

Answer 3

You only need this: It will also help customize error message.

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

Here's a DEMO

Answer 4

Sounds like you want the highlight option?

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

Then add .errorClass to your CSS and define what you want it to look like.

All options can be found here: http://jqueryvalidation.org/validate