Utilizando mascaras nos formularios grails
12/06/2013 14:03
1
Bom dia
Gostaria de saber como fazer mascaras nos campos cnpj, cpf e cep no grails, tentei com arquivos .js e não estão funcionando.
Se alguem tiver algum exemplo ...
Obrigado

Resumindo formulario tem o campo cnpj do tipo string gostaria que ao usuario digitasse e colocasse os pontos o traço e a barra automatico o usuario só digitaria os numeros..
Tags: mascara , arquivo.js , cnpj


1
Estou fazendo desta forma
<head>
.....
<g:javascript src="${resource(dir:'js',file:'jquery-1.2.6.pack.js')}"/>
<g:javascript src="${resource(dir:'js',file:'jquery.maskedinput-1.1.4.pack.js')}"/> <g:javascript>
$(document).ready(function(){
$("#telefone").mask("9999-9999");
$("#cpf").mask("999.999.999-99");
$("#cep").mask("99999-999");
$("#data").mask("99/99/9999");
});
</g:javascript>
</head>
<body>
.....
<p><label for="telefone">telefone</label> :</p>
<input id="telefone" name="telefone" type="text" />
<p><label for="cpf">cpf</label> :</p>
<input id="cpf" name="cpf" type="text" />
<p><label for="cep">cep</label> :</p>
<input id="cep" name="cep" type="text" />
<p><label for="data">data</label> :</p>
<input id="data" name="data" type="text" />
ou assim ambos não aparecem a mascara
<div class="fieldcontain ${hasErrors(bean: empresa_icmsInstance, field: 'cnpj', 'error')} ">
<label for="cnpj">
<g:message code="empresa_icms.cnpj.label" default="CNPJ:" />
<span class="required-indicator">*</span>
</label>
<g:textField name="cnpj" id="cnpj" maxlength="20" value="${empresa_icmsInstance?.cnpj}"/>
</div>

</body>


ajuda... :)
12/06/2013 16:59


0
Funcionou .....estava chamando de forma errada no head os scripts
forma correta
<head>
.....
<g:javascript src="jquery-1.2.6.pack.js"/>
<g:javascript src="jquery.maskedinput-1.1.4.pack.js"/>
</head>
<g:javascript>
$(document).ready(function(){
$("#telefone").mask("9999-9999");
$("#cpf").mask("999.999.999-99");
$("#cep").mask("99999-999");
$("#data").mask("99/99/9999");
});
</g:javascript>
12/06/2013 17:42


0
Prezado Thiago,

Poderia me dar uma dica sobre como você está utilizando.

Este código você está colocando no arquivo edit.gsp?

Se no meu _form.gsp eu tenho o código abaixo, como fica '#cpf"?

Obrigado!

<div id="fieldcpf" class="fieldcontain ${hasErrors(bean: pessoaFisicaInstance, field: 'cpf', 'error')} ">

<label class="col-sm-3 control-label no-padding-right" for="cpf">
<g:message code="pessoaFisica.cpf.label" default="Cpf" />

</label>


<g:textField name="cpf" value="${pessoaFisicaInstance?.cpf}"/>


</div> <!-- fieldcpf -->
08/06/2015 17:30


0
Pedro,
Se entendi bem a sua dúvida ela é sobre seletores jquery, veja se este artigo pode te ajudar: http://www.w3schools.com/jquery/jquery_selectors.asp
No seu caso coloque um "id" no textField para que consiga referencia-lo no jquery facilmente, exemplo abaixo.
?<g:textField id="cpf" name="cpf" value="${pessoaFisicaInstance?.cpf}"/>
08/06/2015 21:48


0
Olá Diego,

Obrigado pela resposta!

Porém resta-me uma dúvida para testar:

Dúvida: Em que lugar devo fazer a declaração abaixo (no _edit.gsp ou no _form.gsp) ?

<g:javascript src="jquery-1.2.6.pack.js"/>
<g:javascript src="jquery.maskedinput-1.1.4.pack.js"/> 
</head>
<g:javascript>
$(document).ready(function(){
$("#telefone").mask("9999-9999");
$("#cpf").mask("999.999.999-99");
$("#cep").mask("99999-999");
$("#data").mask("99/99/9999");
});
</g:javascript>

Obrigado!
09/06/2015 09:18


1
_form.gsp
09/06/2015 17:30


1
Sugestão:

Coloque a declaração dentro da view e não do template ( template começa com '_'. EX: _formCadastro).
Normalmente usamos o "render" dentro das views certo? Declarando o CSS e JS na view por consequência os templates herdam os mesmo.
Logo, se você tiver uma view que tenha vários templates você não precisa declarar em todos.
Outra dica:

$(".cpf").mask("999.999.999-99");
use o seletor  " . " :  esse seletor pega todas as classes CPF ( class= "cpf")
Assim você pode ter quantos campos CPF quiser com qualquer ID que vc quiser . Basta colocar a class="cpf" e ai todos pegaram a mascara e declarando apenas uma linha "mask".

Quando isso é util ? Quando você tiver uma tela que tenha CPF do Estudando , CPF do Responsável , CPF do PAI , CPF da MAE , CPF Do Cachorro... e dai vc teria que ter

$("#cpfPai").mask("999.999.999-99");
$("#cpfMae").mask("999.999.999-99");
$("#cpfCachorro").mask("999.999.999-99");


"Que a força esteja com você".


0
Evandro estou conseguindo não.

Na minha index.gsp declarei assim: 
       
  <head>
<g:javascript src="${resource(dir:'js',file:'jquery-1.2.6.pack.js')}"/>
<g:javascript src="${resource(dir:'js',file:'jquery.maskedinput-1.1.4.pack.js')}"/>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'pessoa.label', default: 'Pessoa')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<g:javascript>
$(document).ready(function(){
$("#.CPF").mask("999.999.999-99");
});
</g:javascript>
<body>


Na minha _form.gsp está assim:
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'cpf', 'error')} required">
<label for="cpf">
<g:message code="pessoa.cpf.label" default="CPF" />
<span class="required-indicator">*</span>
</label>
<g:textField name="cpf" id="CPF" maxlength="50" required="" value="${pessoaInstance?.cpf}"/>
</div>


E não funciona a máscara.
17/06/2015 11:47


0
Sem o # so com o PONTO ( " . " )

<head>
<g:javascript src="${resource(dir:'js',file:'jquery-1.2.6.pack.js')}"/>
<g:javascript src="${resource(dir:'js',file:'jquery.maskedinput-1.1.4.pack.js')}"/>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'pessoa.label', default: 'Pessoa')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<g:javascript>
$(document).ready(function(){
$(".cpf").mask("999.999.999-99");
});
</g:javascript>
<body>

Isso funciona para classes.
div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'cpf', 'error')} required">
<label for="cpf">
<g:message code="pessoa.cpf.label" default="CPF" />
<span class="required-indicator">*</span>
</label>
<g:textField name="cpf" id="CPF"  class= "cpf" maxlength="50" required="" value="${pessoaInstance?.cpf}"/>
</div>


Tenta ai agora e me diz.


0
Funcionou não.
17/06/2015 15:45


0
Colocou o textField igual ao que mandei? com a class="cpf" ?


0
Na _form.gsp


?Na index.gsp
18/06/2015 10:38


0
Manda seu gsp ai todo. e o form que tem o field do cpf.


0
Lembrando que eu estou/gerando as gsp pelo generate-all

Esta é a index.gsp:
<%@ page import="Pessoa" %>
<!DOCTYPE html>
<html>
<head>
<g:javascript src="${resource(dir:'js',file:'jquery-1.2.6.pack.js')}"/>
<g:javascript src="${resource(dir:'js',file:'jquery.maskedinput-1.1.4.pack.js')}"/>
<meta name="layout" content="main">
<g:set var="entityName" value="${message(code: 'pessoa.label', default: 'Pessoa')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<g:javascript>
$(document).ready(function(){
$(".CPF").mask("999.999.999-99");
});
</g:javascript>
<body>
<a href="#list-pessoa" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content…"/></a>
<div class="nav" role="navigation">
<ul>
<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
<li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li>
</ul>
</div>
<div id="list-pessoa" class="content scaffold-list" role="main">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<table>
<thead>
<tr>

<g:sortableColumn property="Nome" title="${message(code: 'pessoa.nomePessoa.label', default: 'Nome Pessoa')}" />

<g:sortableColumn property="Data de Nascimento" title="${message(code: 'pessoa.dtNascimento.label', default: 'Data Nascimento')}" />

<g:sortableColumn property="logradouro" title="${message(code: 'pessoa.logradouro.label', default: 'Logradouro')}" />

<g:sortableColumn property="Estado" title="${message(code: 'pessoa.estado.label', default: 'Estado')}" />

<g:sortableColumn property="CEP" title="${message(code: 'pessoa.cep.label', default: 'CEP')}" />

<g:sortableColumn property="CPF" title="${message(code: 'pessoa.cpf.label', default: 'CPF')}" />

</tr>
</thead>
<tbody>
<g:each in="${pessoaInstanceList}" status="i" var="pessoaInstance">
<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">

<td><g:link action="show" id="${pessoaInstance.id}">${fieldValue(bean: pessoaInstance, field: "nomePessoa")}</g:link></td>

<td><g:formatDate format="dd/MM/yyyy" date="${pessoaInstance.dtNascimento}" /></td>

<td>${fieldValue(bean: pessoaInstance, field: "logradouro")}</td>

<td>${fieldValue(bean: pessoaInstance, field: "estado")}</td>

<td>${fieldValue(bean: pessoaInstance, field: "cep")}</td>

<td>${fieldValue(bean: pessoaInstance, field: "cpf")}</td>

</tr>
</g:each>
</tbody>
</table>
<div class="pagination">
<g:paginate total="${pessoaInstanceCount ?: 0}" />
</div>
</div>
</body>
</html>

E essa é a _form.gsp:
<%@ page import="Pessoa" %>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'nomePessoa', 'error')} required">
<label for="nomePessoa">
<g:message code="pessoa.nomePessoa.label" default="Nome" />
<span class="required-indicator">*</span>
</label>
<g:textField name="nomePessoa" maxlength="50" required="" value="${pessoaInstance?.nomePessoa}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'dtNascimento', 'error')} required">
<label for="dtNascimento">
<g:message code="pessoa.dtNascimento.label" default="Data Nascimento" />
<span class="required-indicator">*</span>
</label>
<g:datePicker name="dtNascimento" precision="day"  value="${pessoaInstance?.dtNascimento}"  />
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'logradouro', 'error')} required">
<label for="logradouro">
<g:message code="pessoa.logradouro.label" default="Logradouro" />
<span class="required-indicator">*</span>
</label>
<g:textField name="logradouro" maxlength="150" required="" value="${pessoaInstance?.logradouro}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'estado', 'error')} required">
<label for="estado">
<g:message code="pessoa.estado.label" default="Estado" />
<span class="required-indicator">*</span>
</label>
<g:textField name="estado" maxlength="50" required="" value="${pessoaInstance?.estado}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'cep', 'error')} required">
<label for="cep">
<g:message code="pessoa.cep.label" default="CEP" />
<span class="required-indicator">*</span>
</label>
<g:textField name="cep" maxlength="50" required="" value="${pessoaInstance?.cep}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'cpf', 'error')} required">
<label for="cpf">
<g:message code="pessoa.cpf.label" default="CPF" />
<span class="required-indicator">*</span>
</label>
<g:textField name="cpf" id="CPF" class="CPF" maxlength="50" required="" value="${pessoaInstance?.cpf}"/>
</div>

Aí está.
18/06/2015 13:38


0
A ta!

Achei que vc dava  dando um g:render do template form dentro do index.

coloca o

<g:javascript>
$(document).ready(function(){
$(".CPF").mask("999.999.999-99");
});
</g:javascript>


dentro do _form.gsp


0
?<%@ page import="Pessoa" %>
<g:javascript>
      $(document).ready(function(){
         $(".CPF").mask("999.999.999-99");
      });
</g:javascript>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'nomePessoa', 'error')} required">
<label for="nomePessoa">
<g:message code="pessoa.nomePessoa.label" default="Nome" />
<span class="required-indicator">*</span>
</label>
<g:textField name="nomePessoa" maxlength="50" required="" value="${pessoaInstance?.nomePessoa}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'dtNascimento', 'error')} required">
<label for="dtNascimento">
<g:message code="pessoa.dtNascimento.label" default="Data Nascimento" />
<span class="required-indicator">*</span>
</label>
<g:datePicker name="dtNascimento" precision="day"  value="${pessoaInstance?.dtNascimento}"  />
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'logradouro', 'error')} required">
<label for="logradouro">
<g:message code="pessoa.logradouro.label" default="Logradouro" />
<span class="required-indicator">*</span>
</label>
<g:textField name="logradouro" maxlength="150" required="" value="${pessoaInstance?.logradouro}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'estado', 'error')} required">
<label for="estado">
<g:message code="pessoa.estado.label" default="Estado" />
<span class="required-indicator">*</span>
</label>
<g:textField name="estado" maxlength="50" required="" value="${pessoaInstance?.estado}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'cep', 'error')} required">
<label for="cep">
<g:message code="pessoa.cep.label" default="CEP" />
<span class="required-indicator">*</span>
</label>
<g:textField name="cep" maxlength="50" required="" value="${pessoaInstance?.cep}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: pessoaInstance, field: 'cpf', 'error')} required">
<label for="cpf">
<g:message code="pessoa.cpf.label" default="CPF" />
<span class="required-indicator">*</span>
</label>
<g:textField name="cpf" id="CPF" class="CPF" maxlength="50" required="" value="${pessoaInstance?.cpf}"/>
</div>

Aí está o _form.gsp e nada ainda. Acho que vou desistir de grails, não consigo fazer nada além do crud padrão. :P
18/06/2015 15:42


0
Calma! Isso não é um problema do Grails.

É problema do Jquery. Alguma coisa ta errada ai e eu não consigo entender sem ta vendo todo seu código . Contexto geral.

Mas. nao usa g:script . tenta <script> </script>
 E me diz.
<script>
      $(document).ready(function(){
         $(".CPF").mask("999.999.999-99");
      });
</script>


0
Nada ainda.
A parada que eu falei que iria desistir, não é só em relação a isso não, é que realmente, tirando o crud gerado pelo generate-all eu não consigo fazer mais nada...hahahahaha
19/06/2015 08:42



Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto