Jump to content

Recommended Posts

Boa tarde comunidade iMaster,

 

Brinco com JS e jQuery já há algum tempo e recentemente desenvolvi um plugin validador de formulários bem prático, e gostaria de pedir que alguém com experiencia e conhecimento nessas linguagens e com algúm tempo livre o testasse e avaliasse, tanto na prática quanto no código mesmo. Se possível, por favor, deixe um feedback com sugestões, apontando erros e melhores práticas.

 

git: https://gist.github.com/Uunknownn/a4af5e57dd31952229473783d9789ed3

demo (JSFiddle): https://jsfiddle.net/2zjypzj6/10/

 

nota: o plugin está em inglês porque eu pretendo futuramente criar um rpg de navegador, mas pode ser facilmente traduzido.

 

Muito obrigado desde já.

--

  • +1 1

Share this post


Link to post
Share on other sites

Eu to longe de avaliar alguma coisa em JS.

 

Massss fica um link que talvez ajude

 

https://tableless.com.br/tudo-que-voce-gostaria-de-saber-sobre-plugins-jquery-e-ninguem-teve-paciencia-de-explicar/

  • +1 1

Share this post


Link to post
Share on other sites
21 horas atrás, Iskandar disse:

Boa tarde comunidade iMaster,

 

Brinco com JS e jQuery já há algum tempo e recentemente desenvolvi um plugin validador de formulários bem prático, e gostaria de pedir que alguém com experiencia e conhecimento nessas linguagens e com algúm tempo livre o testasse e avaliasse, tanto na prática quanto no código mesmo. Se possível, por favor, deixe um feedback com sugestões, apontando erros e melhores práticas.

 

git: https://gist.github.com/Uunknownn/a4af5e57dd31952229473783d9789ed3

demo (JSFiddle): https://jsfiddle.net/2zjypzj6/10/

 

nota: o plugin está em inglês porque eu pretendo futuramente criar um rpg de navegador, mas pode ser facilmente traduzido.

 

Muito obrigado desde já.

--

Cara a sua extensão do Jquery é bem interessante, mas, pode ficar bem melhor, mais automatizada e mais prática pra quem vai usá-la.

Por exemplo:

Ao invés de obrigar todos os parâmetros com o título e mensagem (além da possibilidade de mudar a frase), você poderia colocar algumas coisas definidas como padrão.

Por padrão você poderia selecionar o formulário, e dentro do formulário selecionar somente os inputs que estão usando a sua 'tag' especial (exemplo: data-validate="password").

 

$(function(){
    $("#myForm").validate();
});
<form action="" id="myform">
  
    <!--Você pode por as regras direto no input assim diminue no javascript-->
    <div>E-mail</div>
    <input name="email" data-validate="required|email|len[10,32]" type="email" />
    <!--acrescentar automaticamente o span com a mensagem aqui-->

    <div>Senha</div>
    <input name="senha" data-validate="password|len[6,15]" type="password" />
    <!--acrescentar automaticamente o span com a mensagem aqui-->
  
    <button type="submit">enviar</button>
  
</form>

só assim de cara, ele impedir que seja submetido e colore somente os campos que tem a tag acrescentando abaixo do input a mensagem dentro da span, e outra, usar o focus() para focar no campo quando notado que falta justo ele, neste caso o input[0] da lista de erro.

 

E pode ir ficando mais completo, você deve pensar primeiro em quem está começando (eu), daí vai evoluindo.

 

Não estou criticando sua extensão, pra mim ela está muito boa (mais do que esperava rsrs). 

 

Se quiser posso te ajudar/dar opinião (o que pode não ser grande coisa rsrs).

  • +1 1

Share this post


Link to post
Share on other sites

Mano, acho massa essa ideia de correr o validador direto no elemento através do atributo data. Vou trabalhar nisso assim que der tempo. Até lá pode ficar à vontade pra customizar e modificar da maneira que desejar.

 

Valeu pelo tempo, abraço.

Share this post


Link to post
Share on other sites
19 horas atrás, Iskandar disse:

Mano, acho massa essa ideia de correr o validador direto no elemento através do atributo data. Vou trabalhar nisso assim que der tempo. Até lá pode ficar à vontade pra customizar e modificar da maneira que desejar.

 

Valeu pelo tempo, abraço.

Quando eu terminar minha extensão para o chrome posso analisar melhor sua extensão para o jquery, dar melhores ideias...

Share this post


Link to post
Share on other sites

Ficou bem legal, caara.

 

Umas dica pra deixar mais dinâmico:

- Validar todos os campos de uma vez;

- Validar no key up;

- Validar no blur;

 

Parece bem fácil, gostei mesmo  :D 

Share this post


Link to post
Share on other sites
5 minutos atrás, itlpps disse:

- Validar no key up;

Se liga nessa:

https://forum.imasters.com.br/topic/557881-mask-com-jquery-para-notaescolar-de-0-a-10/?do=findComment&comment=2225793

 

Esse fórum ta uma uva pra aprendizado kkkk

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
       
      Codigo js 
       
      window.onscroll = function(){
          var top = window.pageXOffset || document.documentElement.scrollTop
          var barra = document.querySelector(".barra");
          if(top > 900){
              barra.style.display = 'flex';
      //aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
              barra.classList.add('transition');
          }else{
             barra.style.display = 'none';
          }
      }
       
       
      Codigo css
      .barra{
          width: 100%;
          height: 70px;
          background-color: #090b13;
          display: none;
          justify-content: space-between;
          position: fixed;
          opacity: 0;
      }
      .transition{
          transition: 1s;
          opacity: 0.7;
          
      }
       
      codigo HTML
       
      <div class="barra" >
              <img src="assets/images/logo-nopad.svg" alt="">
              <button class="botao-assinatura-header">Assine Agora</button>
        </div>
       
       
    • By henriquers
      Estou com um problema com o Select2, ele tem um campo de busca mas não esta filtrando corretamente e não estou entendo o motivo, sem utilizar o AJAX colocando os options manualmente ele funciona corretamente, mas trazendo os dados via AJAX ele não funciona o campo de busca.
      Se aguem poder me dar uma luz agradeço a ajuda.
       

       
      Nessa imagem estou tentando filtrar apenas para os itens que tenha LUVA na descrição, mas não funciona, posso colocar qual quer coisa que ele não faz o filtro
       
      Abaixo segue meu codigo
       
      HTML
      <!DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE> Select2 </TITLE> <link href="select2/select2.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/> <script> $(document).ready(function(){ $("#selUser").select2({ language: "pt-br", ajax: { url: "get_dados.php", type: "GET", dataType: 'json', delay: 200, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (response) { return { results: response }; }, cache: true }, width: "20%", closeOnSelect: true, }); }); </script> </head> <body> <select id='selUser' style='width: 200px;'> <option value='0'>- Search user -</option> </select> </body> </html> get_dados.php
      <?php include './conn_orcl.php'; $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT' ORDER BY DESCRICAO"; $parse=oci_parse($conn,$select); oci_execute($parse); $data = array(); while($row=oci_fetch_array($parse)){ $data[] = array("id"=>$row['PRODUTO'], "text"=>$row['PRODUTO']." - ".$row['DESCRICAO']); }; echo json_encode($data); ob_end_flush(); oci_free_statement($parse); oci_close($conn); ?>  
    • By FabianoSouza
      Preciso adicionar uma função de timeout na minha requisição AJAX e peço ajuda aos colegas.
      Já tenho um AJAX que funciona normalmente. Preciso de ajuda para saber como implementar um timeout no código que já tenho.
       
      Vejam o código. É um script genérico, para ser reutilizado pelas diversas functions do sistema, que precisam trazer dados.
      const server = { req : null, res : null, ajax : function(strReq, functionResposta) { this.req = strReq this.url = this.req.url this.req = JSON.stringify(this.req); this.status = 0; try { if (window.XMLHttpRequest) { $obj = new XMLHttpRequest(); } else { $obj = new ActiveXObject('Microsoft.XMLHTTP'); } $obj.onreadystatechange = function() { if ($obj.readyState == 4 && $obj.status >= 200 && $obj.status <= 299) { server.res = JSON.parse($obj.responseText); functionResposta(); } } $obj.open('post', this.url, true); $obj.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); $obj.send(encodeURI('str='+server.req)); } catch(e) { this.req = null; this.res = null; } } };  
       
      Para chamar essa function, passando parâmetros, faço assim:
       
      //crio uma string com parâmetros... var obj={id:'XPTO', url:'/app/backend/'}; //invoco a function AJAX escrita acima server.ajax(obj, function(){});}  
      Essa estrutura funciona normalmente. Só preciso mesmo saber como implementar um "timer" para responder assim que receber a resposta do servidor.
    • By Jack Oliveira
      Boa noite pessoal
       
       
      Quero fazer uma verificação em tempo real no banco de dados antes de clicar para cadastra, ver se o nome que esta no input name="nome_empresa_link"   ver se ele já existe no banco de dados. no caso so permitir preencher outro campos se o input que esta sendo verificado estiver correto ou seja tudo ok...
       
      Lembrando este input ele é preenchido conforme é digitado no input name="nome_empresa"  Não sei se isso interfere ao fazer a verificação
       
      HTML
             <div class="col-md-6">         <div class="form-group">          <label for="nome_empresa">Nome</label>          <input type="text" autocomplete="off" id="nome_empresa" maxlength="100"  name="nome_empresa" class="form-control input_nome_empresa" required placeholder="Nome da Loja">        </div>      </div>      <div class="col-md-6">       <div class="form-group">        <label for="nome_empresa_link">Url Amigavél</label> <em id="resposta"></em>        <input type="text" autocomplete="off"  id="nome_empresa_link" name="nome_empresa_link" maxlength="100" class="form-control input_nome_empresa_link" required placeholder="/ Use maiúsculas, minúsculas e underline.">        <?= $site; ?><span><em style="color: green;" id="nome_empresa_link"></em>/</span>      </div>    </div> No PHP fazer verificação fiz isso...
      <?php if(isset($_POST['nome_empresa_link'])) { $nome_empresa_link=$_POST['nome_empresa_link']; $checkdata = DBCount('ws_empresa','nome_empresa_link',"WHERE nome_empresa_link = '{$nome_empresa_link}'"); if ($checkdata >= 0) { //echo "Um nome igual este já esta sendo usado no sistema"; swal('Atenção!!!', 'A URL AMIGAVÉL não disponivél para cadastro \n tente com outro nome!', 'warning', 'Fechar'); } /*else { echo "<font color='green'>Disponivél...</font>"; } */ exit(); } ?> No ajax fiz assim
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script language="javascript"> var nome_empresa_link = $("#nome_empresa_link"); nome_empresa_link.blur(function() { $.ajax({ url: 'notificacao/checkdata.php', type: 'POST', data:{"nome_empresa_link" : nome_empresa_link.val()}, success: function(data) { console.log(data); data = $.parseJSON(data); $("#resposta").text(data.nome_empresa_link); } }); }); </script> Só que não retorna nada
       
       
    • By Jack Oliveira
      Ola pessoa se a minha duvida estiver no topic errado pessoa desculpas
       
      Mais é o seguinte fiz uns arquivos formato json funciona perfeitamente 
      porem alguns deles tem opção de abrir modal para cadastro e edição
       
      mais eles não esta abrindo DataTable
       
      Se eu fazer sem usar datatable direto no arquivo ele abre
       
      o script esta da seguinte forma
      <script type="text/javascript"> $(function () { $("#DataTableAjax").DataTable({ "pageLength": 25, "processing": true, "serverSide": true, "ajax": "ajax/<?php echo $UrlPage; ?>", "aLengthMenu": [ [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 100, -1], [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 100, "Todos"] ], "paging": true, "lengthChange": true, "searching": true, "ordering": true, "info": true, "autoWidth": true, "columnDefs": [{ "targets": 'no-sort', "orderable": false, }], "language": { "sEmptyTable": "Nenhum registro encontrado", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando 0 até 0 de 0 registros", "sInfoFiltered": "(Filtrados de _MAX_ registros)", "sInfoPostFix": "", "sInfoThousands": ".", "sLengthMenu": "Mostrar _MENU_ resultados por página", "sLoadingRecords": "Carregando...", "sProcessing": "Processando...", "sZeroRecords": "Nenhum registro encontrado", "sSearch": "Pesquisar", "oPaginate": { "sNext": "Próximo", "sPrevious": "Anterior", "sFirst": "Primeiro", "sLast": "Último" }, "oAria": { "sSortAscending": ": Ordenar colunas de forma ascendente", "sSortDescending": ": Ordenar colunas de forma descendente" } } }); }); </script> Bom acho que o arquivo a seguir não tem nada a ver, mais irei colocar mesmo assim. Na parte onde se o arquivo ajax/lojas.php que seria em formato json
      esta assim
       
      <?php return ob_get_clean(); } ), array( 'db' => 'id_empresa', 'dt' => 10, 'formatter' => function ($id_empresa, $row) { ob_start(); $ImprimirPermissao = GetPermissaoAcesso(); ?> <?php if (checkPermissao($ImprimirPermissao, 'lojas', 'produto', 'renovar')) { ?> <a class="btn btn-primary" href="#" data-toggle="modal" data-target="#modalRenovar_<?= $row['id_empresa'];?>"><i title="Nova data de renovação" class="fa fa-calendar" aria-hidden="true"></i></a> <?php } ?>  
      Modal assim
       
      <?php $Query = DBRead('lojas','*'); if (is_array($Query)) { foreach ($Query as $dados) { ?> <div class="modal fade" id="modalRenovar_<?= $id_empresa;?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel"><b>LOJA: </b><?= $nome_empresa;?></h4> </div> <div class="modal-body"> <form method="post" action="?AtualizarEmpresa=<?= $id_empresa; ?>" enctype="multipart/form-data"> <div class="form-group"> <label>Nova data:</label> <input class="form-control" type="date" name="empresa_data_renovacao" required placeholder="00/00/0000"> </div> </div> <div class="modal-footer"> <input type="hidden" name="user_id" value="<?=$user_id;?>"> <center><hr> <button class="btn btn-primary">Atualizar</button> <br><br> </center> </form> </div> <div class="modal-footer"> </div> </div> </div> </div> <?php }} ?>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.