Recentemente, estive trabalhando em um site com alguns formulários. Os designers decidiram colocar os rótulos nas caixas de entrada, pois ficariam melhor na página (isso deveria ser um sinal de alerta). Eu estava trabalhando principalmente no back-end desse projeto, então escrevi o código do servidor para validar o formulário e salvá-lo no banco de dados.
O problema começou quando comecei a fazer a validação do lado do cliente. Eu tinha descoberto o Parsely.js e pensei que seria simples simplesmente inseri -lo. Tudo estava funcionando até o início dos testes com o IE 7 e 8. Como o designer de front end estava usando o atributo placeholder , os rótulos não mostrariam os campos para esses navegadores antigos.
Para corrigir isso, adicionei uma biblioteca JS de espaço reservado . No entanto, como isso adicionou os valores de espaço reservado como os valores de entrada para o formulário, o Parsely não funcionaria corretamente. Depois de algum tempo navegando na documentação de Parsely, decidi adicionar outro validador ao arquivo extend de Parsely que verificaria se o valor do campo não é o valor do espaço reservado.
defaultvalue: function (val, defVal) { return val !== defVal; }
No entanto, ainda há um pequeno problema de o texto do espaço reservado não ser exibido depois que o formulário foi validado e falhou no IE 7 e 8. A opção que achamos melhor para isso foi reinicializar o código do espaço reservado depois que o formulário foi validado.
onFormSubmit: function (isFormValid, event, ParsleyForm) { $.Placeholder.init(); }
A melhor ideia teria sido mover os rótulos para fora do campo de entrada e, em vez disso, usar os marcadores de posição como exemplos . No entanto, se você tem um designer que deseja usar marcadores de posição e deseja usar Parsely.js, este código pode ajudá-lo.
PS Acabei de notar que o campo de tags é feito com texto de espaço reservado para o rótulo: P