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).
está preparada para os principais inputs da Html 5, como email, tel, number, url, date, month, week e time.
Para validar e submeter o formulário, use normalmente o inputtype="submit" padrão do html. Já para resetar os campos, use preferencialmente um elemento html (qualquer um) acompanhado da classeui_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 .
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
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
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 (esse asterisco será identificado com a classui_requiredSignal. Assim é possível adicionar cor, espaçamento, esconder ou até alterar o seu conteúdo via CSS).
A posição padrão do asteriscos (*) será após o label ou data-label-field. Se preciso, use no input o atributo data-label-field-signal-position com as posições posíveis: append, prepend, before ou after (padrão). Também é possível usar o valor hide para não incluir asterico.
A máscara, validação e mensagem serão atribuídas aos campos de acordo com as regras abaixo.
Campos obrigatórios só serão submetidos após preenchimento dos dados e se eles estiverem de acordo com o tipo, como cpf, data, email e etc. O mesmo vale para campos não obrigatórios, mas que foram preenchidos: a submissão só ocorrerá mediante preenchimento correto de acordo com o tipo.
A mensagem de erro usará o name do campo. Caso queira alterar esse nome de identificação, use data-label-warning no campo com a rótulo desejado.
Para facilitar a acessibilidade aos campos, delegue ao formulário a distribuição do artributo tabindex
Para isso, insira no form o atributo data-auto-tabindex="true".
Por padrão, a mensagem de alerta em uma tentativa de submissão com erros aparecerá no topo do formulário.
Para que haja uma etiqueta destacada em 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.
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.
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,form) 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; e form é o objeto <form’ submetido.
Atenção: Se essa função callback for implementada, o return da submissão 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 hiddenui_reSubmit existir no formulário testado).
Atenção: Considere que todos os formulário submetidos na página executarão callback_submit(valid,form), se a função existir. Portanto, se tiver outro formulário na página, use a condicional dentro de callback_submit: if(form.hasClass(".myFormClass") or form.attr("name")=="myFormName") do.Something(); else form.submit();.
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.
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.
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.