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, seja para validação ou máscara:
    • 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 serã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). Assim, é possível usar vários inputs com a mesma característica, ex: name="data", name="data-agendamento" e name="data-nascimento" serão considerados (para validação e máscara) apenas como name="data".
      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".
      Não confundir esse caso do hífen com underline, que faz parte do nome, já que name="telefone" é diferente de name="telefone_completo".
    • Alternativamente ao name, também é possivel usar class para identificar esses campos. Os nomes são os mesmos acima, mas com o prefixo "ui_". Exemplo: name="email" ou class="ui_email", assim como name="cpf" ou class="ui_cpf" (o efeito será o mesmo).
    • SimpleUi está preparada para os principais inputs da Html 5, como email, tel, number, url, date, month, week e time.
  2. Para validar e submeter o formulário, use normalmente o input type="submit" padrão do html. Já para resetar os campos, use preferencialmente um elemento html (qualquer um) acompanhado da classe ui_resetForm, exemplo: <input type="button" value="Limpar" class="ui_resetForm" />. É possível usar o input padrão type="reset" do html, mas o .ui_resetForm é mais indicado com os campos de SimpleUi.
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
    • Por padrão, os campos obrigatórios ui_required serão indentificados com asteriscos (*) no label anterior (prev) ao input (somente se esse label existir). Caso queira indicar um elemento diferente, use no input o atributo data-label-field com o seletor desejado, exemplo: .foo ou #foo.
  3. Por padrão, a mensagem de alerta em uma tentativa de submissão com erros aparecerá no topo do formulário.
    • Para etiquetar cada um dos campos, use o atributo data-alert-tip="true" no form.
    • Nesse caso, também é possível usar o atributo data-alert-tip-class e informar uma classe para customizar o box da etiqueta.
  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. Caso queira alterar uma mensagem de erro, use data-label-warning no campo com a frase desejada
  4. Antes da validação do formulário, usuários avançados podem implementar uma função do tipo callbefore
    • Para isso, crie a função callbefore_submit(form) para ser chamada na primeira linha da submissão, antes dos testes de validação, onde form é o objeto (formulário) submetido.
    • 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.
  5. Após a 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 na última linha da submissão, após os testes 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.
  6. Antes da animação de abertura com o alerta de erros, usuários avançados podem implementar uma função do tipo callbefore
    • Para isso, crie a função callbefore_validation(form,alerts,fields), onde onde form é o objeto (formulário) submetido, alerts é o objeto da mensagem de erro e fields são os campos com erro
    • 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.
  7. 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(form,alerts,fields) e implemente as ações que irão ocorrer após a animação, onde onde form é o objeto (formulário) submetido, alerts é o objeto da mensagem de erro e fields são os campos com erro.
    • 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.

Alerta

. Padrão: Não (false)
Tem certeza que deseja reiniciar todos os valores?

Resultado para Formulário