0

Tenho um formulário que realiza o cadastro de pessoas. Necessito envia-lo com a Ajax para não recarregar a página.

Até o momento, tenho o seguinte pronto que segui de um tutorial.

Js que faz o envio.

$("form#pessoasCadastrar" ).submit(function( event ) {

    event.preventDefault();

    data = $("form#pessoasCadastrar" ).serialize(),
    url = '/pessoas/salvar',

    var posting = $.post( url, { formData: data } );
    posting.done(function( data ) {
    if(data.fail) {
      $.each(data.errors, function( index, value ) {
        var errorDiv = '#'+index+'_error';
        $(errorDiv).addClass('required');
        $(errorDiv).empty().append(value);
      });
      $('#successMessage').empty();          
    } 
    if(data.success) {
        $('.register').fadeOut(); //hiding Reg form
        var successContent = '<div class="message"><h3>Registration Completed Successfully</h3><h4>Please Login With the Following Details</h4><div class="userDetails"><p><span>Email:</span>'+data.email+'</p><p><span>Password:********</span></p></div></div>';
      $('#successMessage').html(successContent);
    } //success
  }); //done
});

PessoaRequest.php

public function rules(){ ... }
public function messages(){ .... } 

public function response(array $errors)
{
    if ($this->ajax() || $this->wantsJson())
    {
        return response()->json($errors, 422);
    }
       $dados = array('fail' => true, 'errors' => $errors);
       return response()->json(array('fail' => true,'errors' => $errors));
}

PessoaController.php

public function salvar(PessoaRequest $request){

 $p = new Pessoa();
 [....]

 return Response()->json(array('success' => true,$request->all()));

}

Ao enviar o formulário, se não preencher os input, ele cai em uma tela branca com o retorno json do PessoaRequest, informando quais campos devem ser preenchidos. Caso dê sucesso ao enviar, dá o retorno json de sucesso.

Meu problema é quando dá o erro no request, gostaria de pegar o retorno json e tratar na minha view para mostrar os erros, mas sempre que envio, ele cai nessa tela branca com os erros

{"fail":true,"errors":{"nome":["O campo nome \u00e9 obrigat\u00f3rio!"]}}

Como pego essas info na minha view sem recarrega-la?

1
  • Eu só consegui resolver esse problema ainda usando o validator() ao invés do request para requisições com ajax Commented 19/05/2016 às 12:39

1 Resposta 1

1
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js" ></script>
<script src="\jquery\funcoes\Validacao.js" charset="utf-8"></script>

O Arquivo Validacao.js

$(document).ready(function(){
    $('#idDoForm').validate({
        rules:{
            nome:{
                required: true,
                minlength: 3
            },
            dataNasc: {
                required: true,
            },
            telCel: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
        },
        messages:{
            nome:{
                required: "O campo nome é obrigatorio.",
                minlength: "O campo nome deve conter no mínimo 3 caracteres."
            },
            dataNasc:{
                required: "O campo Data de Nascimento é obrigatorio."
            },
            telCel:{
                required: "O campo Telefone Celular é obrigatorio."
            },
            email: {
                required: "O campo email é obrigatorio.",
                email: "O campo email deve conter um email válido."
            },
        }

    });
});

Meu HTML

{!! Form::label('DataNasc','Data de Nascimento:') !!}
              <input type="date" id="dataNasc" name="dataNasc" value="" class="form-control" onblur="CalcIdade();"/>
            </div>

            <!--Tel Cel Cliente Inputs-->
            <div class="form-group">
              {!! Form::label('TelCel','Telefone Celular:') !!}
              {!! Form::text('telCel', null, array('class'=>'form-control', 'id'=>"telCel"))!!}
            </div>

            <!--Tel Res Cliente Inputs-->
            <div class="form-group">
              {!! Form::label('TelRes','Telefone Residencial:') !!}
              {!! Form::text('telRes', null, array('class'=>'form-control', 'id'=>"telRes"))!!}
            </div>

            <!--Tel Res Cliente Inputs-->
            <div class="form-group">
              {!! Form::label('Email','E-mail:') !!}
              {!! Form::email('email', null, array('class'=>'form-control', 'id'=>"email"))!!}
            </div>

            <!--Sexo Cliente Inputs-->
            <div class="radio">
              <label>
                {!! Form::radio('sexo', 'Masculino')!!}
                <p>Masculino</p>
              </label>
            </div>
            <div class="radio">
              <label>
                {!! Form::radio('sexo', 'Feminino')!!}
                <p>Feminino</p>
              </label>
            </div>

            <input type="hidden" name="idade" id="idade" value="">
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            {!! Form::submit('Salvar Cliente', ['class'=>'btn btn-primary']) !!}
          </div>
        {!! Form::close() !!}

No caso a biblioteca so vai precisar do seu form e dos ids dos inputs e pronto. Espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .