New Tricks HTML5 / CSS3 para Validação

HTML5 e CSS3 adicionar mais alguns truques para simplificar a validação, e eles são absolutamente maravilhoso. Enquanto você sempre pode usar javascript e expressões regulares para validar suas páginas, HTML5 promete uma solução muito mais fácil. Quando você usa os elementos de entrada para fins especiais, o navegador irá verificar automaticamente o campo de formulário para garantir que ele está em um formato adequado.

Se a entrada não é válido, o formulário (em geral) não apresentar, eo especial :inválido CSS pseudo-classe vai ser associado com o campo inválido. Basta fornecer CSS para sua página manusear o :inválido Estado:

 : Inválido {background-color: red-}

Quando este estado CSS está activo, todos os campos inválidos terá a :inválido styling. Por exemplo, se você tem um o email campo definido eo conteúdo desse campo não é um endereço de e-mail válido, o inválido estilo será aplicado. Assim que o endereço é no formato correcto, o inválido estilo vai ser removido.

O desenvolvedor não precisa adicionar qualquer outro código para o formulário. Basta adicionar CSS para exibir as entradas inválidas, eo navegador fará o resto. Você não precisa mesmo de especificar a expressão regular para endereços de e-mail ou quaisquer outros campos de entrada especialidade - a expressão regular adequado para cada tipo de campo já está embutido.

Note-se que, se um campo é requerido (com o requeridos atributo), ela será considerada inválida até que tenha algum valor.

É possível que o navegador irá recusar-se a processar uma forma até que todos os campos são validados, mas esse comportamento ainda não parece ser universal entre os navegadores compatíveis com HTML5.

Se desejar, você pode desativar a validação para qualquer campo, adicionando o novalidate atribuir a esse elemento.

Como adicionar um padrão

o padrão atributo permite especificar uma expressão regular usada para validar o formulário. Se o conteúdo corresponde à expressão regular, o campo será considerado válido. o padrão atributo deve ser usado somente quando as técnicas de validação padrão não são suficientes (ou seja, você está usando um elemento de entrada comum, que não tem um padrão automático) porque pode ser difícil de depurar expressões regulares.

Quando você especificar um padrão, você também deve incluir uma título atributo. O título deve indicar o que o padrão é. O navegador pode usar isso como uma dica para o usuário. Ele também pode ser útil para adicionar informações padrão como texto de espaço reservado.

Como para marcar um campo como exigido

o requeridos atributo permite que você especifique um determinado campo, conforme necessário. navegadores que suportam irá marcar todos os campos obrigatórios (talvez, destacando-os em vermelho), se não forem preenchidos. Alguns navegadores também irá enviar um aviso se o usuário tentar enviar um formulário com campos obrigatórios vazios.

O especial :requeridos pseudo-classe permite-lhe aplicar um estilo CSS a todos os elementos necessários em seu formulário (dando-lhes uma borda ou background-color, por exemplo). Aqui está um exemplo de um estilo CSS para a marcação de elementos necessários com uma borda vermelha:

 : Necessário {border: 1px solid vermelhos}

Se você tem um campo obrigatório e não tem conteúdo, que o campo irá desencadear a inválido estilo.

Como adicionar texto do espaço reservado

o espaço reservado atributo permite que você adicione um valor especial espaço reservado em seus campos de texto. Este marcador actua como um rótulo temporária que mostra o efeito do campo sem a necessidade de uma etiqueta de rótulo. Assim que o utilizador activa o campo, o texto do espaço reservado desaparece.

Nem todos os navegadores suportam texto do espaço reservado. Outros navegadores irá simplesmente ignorar o espaço reservado atributo. Da mesma forma, se o campo já está preenchido, o espaço reservado não será visível. Por estas razões, ele ainda é o preferido para adicionar uma etiqueta que os usuários saibam o que digitar em cada área de texto. texto do espaço reservado é especialmente útil quando ele é usado para indicar como a entrada deve ser formatado.