Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Formulário Download

? - +
Máscaras e validações
  1. Dentro de um formulário, use o atributo name para cada campo de acordo com o seu tipo:
    • Entradas de texto: ddd, telefone, telefone_completo, data, hora, periodo_inicial, periodo_final, data_nascimento, data_futura, cpf, cnpj, cep, email, confirmar_email, senha, confirmar_senha. Seleção: uf
    • Valores após hífen são desconsiderados do name para a validação e máscara (a Ui faz uso do seletor por prefixo separado por hífen da jQuery). Isso signigica que name="data-aniversario" será validado tal como name="data" ou name="telefone_completo-usuario" será validado tal como telefone_completo.
      Isso pode ser útil quando há dois ou mais campos com a mesma validação. Nesse caso, use hífen após o name. Exemplo: Um input com name="email", outro input com name="email-remetente" e o terceiro input com name="email-destinatário".
    • SimpleUi está preparada para os principais inputs da Html 5, como email, tel, number, url, date, month, week e time
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. Opcionalmente, o atributo value pode ser usado com um valor inicial, como um rótulo informativo.
    • Para isso, coloque a classe ui_clean no campo com o valor falso
    • Esse valor é uma máscara, portanto, nulo, mesmo se submetido
    • Quando o foco atingir o campo, o valor inicial será zerado
    • Campos ui_clean receberão etiquetas (dicas), caso tooltip esteja incorporada a versão de SimpleUi
  2. Para obrigar o preenchimento/seleção de um campo:
    • Insira a class ui_required
  1. A máscara e a validação serão atribuídos aos respectivos campos.
  2. Campos obrigatórios só serão submetidos após preenchimento dos dados e se eles estiverem de acordo com o seu tipo, como cpf, data, email e etc.
    • O mesmo vale para campos não obrigatórios, mas que foram preenchidos: a sua submissão só ocorrerá após o preenchimento correto dos dados de acordo com o seu tipo.
  3. Após o teste de validação do formulário, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_submit(valid) e implemente as ações que irão ocorrer após o teste de validação, onde valid pode ser true ou false, de acordo com o resultado da validação do formulário submetido.
    • Ex: function callback_submit(valid){ if(valid){ alert("All done!"); }else{ alert("Ops!"); } }
    • Atenção: Se essa função callback for implementada, o return do formulário será false (caberá a função implementar a submissão ou não do formulário). Se optar pela submissão, use $("form").append("<input type=‘hidden’ name=‘ui_reSubmit’ value=‘yes’ />").submit(); a fim de evitar que callback_submit() caia em loop infinito (a função está preparada para não executar esse callback se o campo hidden ui_reSubmit existir no formulário testado).
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
  4. Após a animação de abertura com o alerta de erros, usuários avançados podem implementar uma função do tipo callback
    • Para isso, crie a função callback_validation() e implemente as ações que irão ocorrer após a animação
    • Essa função não é obrigatória, ou seja, só será executada se existir. Caso positivo, para evitar duplicidades, lembre-se de implementar a função callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.
Customizar


Regra geral

Use o atributo name de acordo com o seu tipo, como cpf, data, email e etc. A máscara e a validação serão atribuídos aos respectivos campos. Saiba mais
Valores após hífen são desconsiderados do name para a validação e máscara (a Ui faz uso do seletor por prefixo separado por hífen da jQuery). Isso signigica que name="data-aniversario" será validado tal como name="data" ou name="telefone_completo-usuario" será validado tal como telefone_completo.
Isso pode ser útil quando há dois ou mais campos com a mesma validação. Nesse caso, use hífen após o name. Exemplo: Um input com name="email", outro input com name="email-remetente" e o terceiro input com name="email-destinatário".

SimpleUi está preparada para os principais inputs da Html 5, como email, tel, number, url, date, month, week e time.

Campos obrigatórios

Marque, abaixo, os campos que serão de preenchimento obrigatório:
  • Confirmar

Campos obrigatórios só serão submetidos após preenchimento dos dados e se eles estiverem de acordo com o seu tipo, como cpf, data, email e etc.
O mesmo vale para campos não obrigatórios, mas que foram preenchidos: a sua submissão só ocorrerá após o preenchimento correto dos dados de acordo com o seu tipo.

Campos com valores simulados

Marque, abaixo, os campos que terão valores inciais falsos: Serão limpos quando ganharem foco

Opcionalmente, o atributo value pode ser usado com um valor inicial, como um rótulo informativo. Esse valor é uma máscara, portanto, nulo, mesmo se submetido.
Quando o foco atingir o campo, o valor inicial será zerado. O mesmo vale para a submissão de campos obrigatórios, mas que contenham valores falsos. Eles serão nulos, portanto, não-válidos até que sejam preenchidos com valores compatíveis com os seus tipos, como cpf, data, email e etc.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Formulário