O validaform é um script que foi feito para facilitar a vida do Front-End e Back-End, pois possui suporte à bootstrap, AJAX, Bootstrap Select (Select Personalizado), dentre outras.
O validaform.js deve ficar no final do <body> e após o jQuery:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="js/validaform.js"></script>
Não é necessário realizar nenhuma chamada para o script funcionar
| Requerido | Atribulos | Valor | Descrição |
|---|---|---|---|
| [requerido] | method |
POST/GET | Este é o tipo método utilizado para enviar as informações do formulário |
| opcional | class |
ajax | Se quiser enviar o formulário utilizando via AJAX |
| [requerido] se possui class "ajax" |
data-elsend |
<seletor de elemento> | Utilize o seletor do elemento para informar qual o elemento que irá mostrar quando o formulário estiver sendo enviado via AJAX. Exemplo: data-elsend="#id_div" |
| [requerido] | data-bootstrap |
<boolean> | Se o formulário for no formato bootstrap setar como "true" senão "false" |
| [requerido] se possui class "ajax" |
data-elsuccess |
<seletor de elemento> | Utilize o seletor do elemento para informar qual o elemento que irá mostrar o conteúdo que irá ser retornado da requisição AJAX. Exemplo: data-elsuccess="#id_div" |
| opcional | data-callback |
<função> | Utilize se deseja criar um callback para ser executado quando finalizar o envio. Funciona apenas via AJAX Exemplo: data-callback="name_function()" |
| [requerido] se data-bootstrap for "false" |
data-elvalidate |
<seletor de elemento> | Utilize o seletor do elemento para informar qual o elemento que irá mostrar as mensagens de validação Para data-bootstrap="false" Exemplo: data-elvalidate="#id_div" |
| [requerido] | data-scroll |
<boolean> | Se o formulário tera um scroll automático para o campo validado setar como "true" senão "false" |
| Atributo | Valor | Descrição |
type |
<email | text | password | file> | Tipo do campo |
class |
<timer (hora) | phone (telefone) | cnpj | cpf | data | cep | so-numero | so-texto | moeda | no-blocked> | Classes CSS que serão tratadas pelo script, gerando máscaras, retringindo caracteres e validado os dados |
required |
<atributo html5> | Setando o campo como obrigatório |
data-msgrequired |
<string> | Texto que será apresentado caso o input seja obrigatório e não estiver preenchido |
data-msgvalidate |
<string> | Texto que será apresentado caso o input seja preenchido mas não corresponda as prerequisitos do tipo informado |
maxlength |
<atributo html5> | Determinando o tamanho máximo do campo. |
data-minlength |
<inteiro> | Determinando o mínimo de caracteres do campo. |
data-msgequals |
<string> | Texto que será apresentado caso os inputs do tipo email | password com o mesmo name não estejam com valores iguais. |
data-cript |
<array> | Relação das criptografias (md5 e sha1) utilizadas para o campo do tipo password. Exemplo: data-cript="md5, sha1, sha1". Executará assim: sha1(sha1(md5("valor"))) |
data-extencoes |
<array> | Relação das extenções permitidas para o arquivo. Exemplo: data-extencoes=".jpg, .png, .pdf" |
data-typesize opcional |
<string> | Tipo do tamanho do arquivo, podendo ser MB ou KB. Exemplo: data-typesize="MB". Default: KB |
data-maxsize opcional |
<string> | Tamanho máximo do arquivo carregado. O tamanho é baseado no data-typesize |
Para cada input do tipo file, deverá ser criado no formulário um input do tipo text onde mostrará o endereço do arquivo, com o mesmo attributo name, somente acrescido de "txt".
Exemplo:
<input type="file" name="arquivo" >
<input type="text" name="arquivotxt" >