Posso marcar um campo inválido de javascript?

Ao ler esta postagem , descobri que existem algumas pseudo classes para valores de entrada 'válidos' e 'inválidos' introduzidos no HTML5.

Existe uma maneira de marcar um campo de entrada como inválido / válido de javascript? Ou, como alternativa, posso substituir o método de validação usado?

Você pode usar a função customValidity para essa finalidade.

Se você adicionar uma mensagem customValidity ao campo, ele se tornará inválido. Quando você define a mensagem como uma string vazia, ela se torna válida novamente (a menos que seja inválida por outros motivos).

field.setCustomValidity("Invalid field."); tornará o campo inválido.

field.setCustomValidity(""); tornará o campo válido, a menos que ele falhe em uma restrição HTML5.

Edit : Alguém esclareceu que você está procurando atributos "válidos" "inválidos" para DOM.

Eu adicionaria atributos a cada tag usando dom_object.setAttribute("isvalid", "true"). Você também pode ter uma função de validação central que atualiza esses atributos a cada vez (e usa a dom_object.getAttribute("isvalid")cada vez).

Você pode executar esta função toda vez que um elemento perder o foco ou quando quiser.

Não é exatamente elegante, mas infelizmente não há suporte para "pseudo" com javascript e HTML5 agora.

Se entendi sua dúvida, você pode fazer validação com Javascript. No entanto, esteja avisado que é muito fácil contornar a validação do lado do cliente, especialmente a validação de javascript . Você nunca deve confiar nos dados do cliente e sempre fazer verificações no lado do servidor.

Por exemplo, eu poderia facilmente encontrar IDs de elemento inspecionando o código-fonte e, em seguida, fazer document.getElementById('some_id').setAttribute('max', new_number)para alterar o valor máximo (esta foi uma das entradas do seu link).

Existem várias maneiras de fazer isso, então tentarei dar a você o idioma geral.

Você pode obter o valor fazendo document.getElementById('form_element_id').value(certifique-se de fornecer o formulário a nameque é enviado ao servidor e um idque é usado por javascript). Para áreas de texto, você pode usar .innerHTML.

Então você tem o valor em uma variável, existem várias maneiras de verificá-lo.

Por exemplo, você poderia fazer if (parseInt(my_value) < 0) //error. Você também pode usar expressões regulares, não vou explicar tudo, mas você pode começar aqui http://www.w3schools.com/jsref/jsref_obj_regexp.asp . Eu sei que w3schools não é a melhor fonte, mas acho que é um bom lugar para começar.

Agora para a parte de validação: adicione onsubmit="return validateForm()à sua tag de formulário onde validateForm () é a função que faz toda a verificação. E a função apenas retorna truese válida e falsecaso contrário. Isso substitui a função de validação padrão (que por padrão não faz nada).

Portanto, no exemplo acima, //errorseria substituído por return false. Você também pode fazer outras coisas; como alertar o erro e retornar falso. Você também pode usar javascript para destacar os campos inválidos (não tenho certeza se é isso que você quer dizer com " marcar um campo de entrada como inválido / válido de javascript ")

Claro, se você não quiser verificar todos os campos você só precisa retornar verdadeiro se alguns deles passarem. Novamente, você não deve confiar nisso, mas se seu objetivo é apenas dissuadir as pessoas comuns, então é uma solução fácil.

Existe uma maneira de marcar um campo de entrada como inválido / válido de javascript?

Infelizmente, você não pode estilizar pseudo classes em JavaScript, uma vez que não são elementos reais, não existem no DOM real.

Com o vanilla JavaScript você usaria a API de validação .

No jQuery, você pode simplesmente fazer isso, http://jsfiddle.net/elclanrs/Kak6S/

if ( $input.is(':invalid') ) { ... }

Ou, como alternativa, posso substituir o método de validação usado?

Se você estiver usando a validação HTML5, atenha-se à marcação. Caso contrário, você pode desabilitar a validação de HTML5 com $form.attr('novalidate', 'novalidate')e usar JS para validar seus campos e, em seguida, adicionar classes validou invalidquando necessário. Fiz um plugin que funciona assim para suportar navegadores não HTML5.