EN
Este conteúdo não está disponível em seu idioma, mas aqui está a versão em inglês.

:invalid pseudo-class

Applies one or more styles to specified input fields when the fields are invalid.

Internet Explorer 10

 

Syntax

selector:invalid {...}

Parameters

selector

A CSS simple selector.

Remarks

The criteria used to determine whether an input field is valid correspond to the properties of the ValidityState Document Object Model (DOM) object. For more information on determining validity, see the following reference topics:

TermDescription

customError

The input field has raised a custom error, which has been set by the element's setCustomValidity method (string is not empty).

patternMismatch

The user entered something that does not match what the pattern attribute specifies, such as letters when numbers were expected.

rangeOverflow

The user entered a value greater than what was specified by the max attribute on a range control.

rangeUnderflow

The user entered a value less than what was specified by the min attribute on a range control.

stepMismatch

The user entered a value that doesn't correspond to an allowed value as specified by the step and min attributes. For example, the user entered an odd number when even numbers were expected.

tooLong

A control has a value that is longer than the maxlength attribute specifies. Because Windows Internet Explorer allows a user to enter only the maxlength number of characters, this usually occurs when the default value contains too many characters.

typeMismatch

The user entered something that is not the correct syntax, such as an incorrectly formatted URL or email address.

valid

The input field value does not have any validity errors.

valueMissing

The user has not entered a value on a required field.

 

A required field will be invalid until the correct input is entered. A field that isn't required but has validation, such as a URL field, will be valid until text is entered.

Examples

The following example puts a green border on a field when it is valid and a red border with bold text when it isn't. The email field is required, but the others aren't. The URL field is pre-filled with a bad URL, so it isn't valid when the page opens. In addition, the two optional fields are styled with light gray backgrounds, and the required field with an eye-catching yellow background.


<!DOCTYPE html >
<html>
<head>
  <title>:valid/:invalid Pseudo-class Example</title>
  <style type="text/css">

  #PC1 input:valid { 
    border:solid lime;
    font-weight:normal;
  }
  #PC1 input:invalid { 
    border:solid red;
    font-weight:bold;
  }
  #PC1 input:required {
    background-color:Yellow;
  }
  #PC1 input:optional {
    background-color:LightGray;
  }       
  </style>
</head>
<body>
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>       
    <p>* required field</p>
  </form>
</body>
</html>

You can view this page. (Internet Explorer 10 or a browser that supports the form validation pseudo-classes is required for this page to render correctly.)

See also

HTML5 Forms (Internet Explorer 10 Guide for Developers)
validity attribute
ValidityState object
Related pseudo-classes
:optional
:required
:valid

 

 

Mostrar:
© 2014 Microsoft