javascript - Error in the validation form blank textarea with jquery validate and ajax post form -
i have spring project , task register comment on particular system design. form of page follows:
<form id="formulariocadastrocomentario" role="form" method="post" class="form-horizontal"> <input type="hidden" id="projeto" name="projeto" value="${projeto.id}"> <input type="hidden" id="usuario" name="usuario" value="${usuario.id}"> <input type="hidden" id="usuario_nome" name="usuario" value="${usuario.nome}"> <label class="control-label"for="textocomentarioinput"><h3>novo comentário</h3></label> <div class="form-group"> <div class="input-group"> <textarea id="textocomentarioinput" name="texto" class="form-control" placeholder="comentário" required="required"></textarea> </div> </div> <br> <input name="botao" id="botaoenviarcomentario" class="btn btn-primary" value="enviar" /> <a href="<c:url value="/projeto/index"></c:url>" class="btn btn-default">voltar</a> </form> in jsp page has script link file funcoes.js, , funcoes.js has ajax function insert comment after submit form:
$("#formulariocadastrocomentario").submit(function(e) { var idprojeto = $('#projeto').val(); var idusuario = $('#usuario').val(); var nomeusuario = $('#usuario_nome').val(); var cabecalho = "comentários projeto"; var textocomentario = $('#textocomentarioinput').val(); var data = new date(); var dataformatada = ("0" + data.getdate()).substr(-2)+ "-" + ("0" +(data.getmonth()+ 1)).substr(-2)+ "-"+ data.getfullyear()+ " "+ ('0' + data.gethours()).slice(-2)+ ":"+ ('0' + data.getminutes()).slice(-2); $.ajax({ type : "post", data : { idprojeto : idprojeto, idusuario : idusuario, texto : textocomentario }, url : "/gpa-pesquisa/comentario/comentarprojeto", datatype : "html", success : function() { $('#comentariolist').prepend( '<li class="well">' + '<div class="nome_usuario">' + nomeusuario+ '</div>' + '<div class="corpo_texto">' + textocomentario + '</div>' + '<div class="formatacao_data">' + dataformatada + '</div>' + '</li>'); $("#headcomentarios").show(); } }); $("#formulariocadastrocomentario")[0].reset(); }); im jsp page has jquery validate code after close html tag body:
<script type="text/javascript"> $(document).ready(function($) { $("#formulariocadastrocomentario").validate({ rules : { texto : { minlength : 5, required : true, } }, messages : { texto : { required : "campo obrigatório", minlength : "o campo deve ter no mínimo 5 caracteres" } }, highlight : function(element) { $(element).closest('.form-group').addclass('has-error'); }, unhighlight : function(element) { $(element).closest('.form-group').removeclass('has-error'); }, errorelement : 'span', errorclass : 'help-block', errorplacement : function(error, element) { if (element.parent('.input-group').length) { error.insertafter(element.parent()); } else { error.insertafter(element); } } }); }); the problem when try post new comment under 5 letters or blanks jquery validate message appears, if submit form code makes registering new comment. wonder how validate jquery ajax not working before leave comments user registering less 5 letters or blanks. thank you,
you're supposed put ajax code within submithandler callback function of .validate() method, not within own .submit() handler.
$(document).ready(function($) { $("#formulariocadastrocomentario").validate({ submithandler: function(form) { var idprojeto = $('#projeto').val(); // rest of ajax function... .... return false; // block default submit }, rules : { texto : { minlength : 5, required : true, } }, ...... submithandler : callback handling actual submit when form valid. gets form argument. replaces default submit. the right place submit form via ajax after validated.
btw, don't need declare rules in 2 places. since have required: true specified within .validate() method, not need required="required" attribute on corresponding elements.
Comments
Post a Comment