0

Yo quiero que me muestre el msj de cuales son los campos que requiero en mi formulario el problema que tengo es que quiero este msj mas personalizado o que me aparezcan en los campos requeridos lo intente realizar con un boton de tipo submit y ahi si me funciona me requiere los campos y me muestra un msj ala par de cada campo el problema es ala hora de enviar los datos por medio de ajax y jquery me deja de funcionar entonces tengo que hacerlo con un span pero ya no me funciona como deberia

introducir la descripción de la imagen aquí

este es mi formulario el cual lo tengo que enviar con un span por que si lo hago con el button que tengo ahi comentado me deja de funcionar y no se como resolver el problema

<div class="modal-body mx-6">
                {{Form::open(array( 'url'=>'#','id'=>'formulario','method'=>'post'))}}
                <h1>Registrar<span class="badge badge-secondary">Gerencias</span></h1>
                <br>
                <br>
                <div class="form-group">
                    {!! Form::label('codigo', 'Codigo:', ['class' => 'col-lg-2 control-label']) !!}
                    <div class="col-lg-10">
                        {!! Form::text('codigo', $value = null, ['class' => 'form-control','maxlength'=>'2', 'placeholder' => 'Ingrese el Codigo','required'=> 'true']) !!}
                    </div>
                </div>
                <br>
                <br>
                <div class="form-group">
                    {!! Form::label('ga', 'Gerencia administrativa:', ['class' => 'col-lg-2 control-label']) !!}
                    <div class="col-lg-10">
                        {!! Form::text('ga', $value = null, ['class' => 'form-control', 'placeholder' => 'Nombre dela Gerencia','required'=> 'true']) !!}
                    </div>
                </div>
                <br>
                <br>

                <br>
                <br>
                <br>
            </div>
            <div class="modal-footer d-flex justify-content-center">

                <span  class="btn btn-success" onclick="submit()" id="enviar">GUARDAR</span>
                    {{--<button type="submit" class="btn btn-success" onclick="submit(e)" id="enviar">GUARDAR</button>--}}
            </div>
            {{Form::close()}}
            <div id="resultado"></div>
        </div>

este es mi script por el cual envio los datos

<script>
    function submit () {
        $.ajaxSetup({
            header:$('meta[name="_token"]').attr('content')
        });
        // e.preventDefault();

        var url = 'gerencia.crear';
        $.ajax({
            type: "POST",
            url: url,
            data: $('#formulario').serialize(),
            dataType:'html',
            success: function (data) {
                var obj=jQuery.parseJSON(data);
                if ((obj.estado=='ok')){
                    alert(obj.mensaje);
                    {{--window.location="{{route('gerencia_inicio') }}"--}}
                }else{
                    alert(obj.mensaje);
                    $('#enviar').removeAttr("disabled");
                }
            }
        });
    }
</script>

y esta es mi funcion en la cual inserto los datos

public static function gerencia_insertar(Request $request)
    {
        \DB::beginTransaction();
        try {
            $gerencias = new gerencia();
            $gerencias->ga = $request->ga;
            $gerencias->codigo = $request->codigo;
            $gerencias->save();
            \DB::commit();

            return response()->json(['mensaje' => 'Registro guardado', 'estado' => 'ok'], 200);

        } catch (\Exception $e) {
            \DB::rollback();
            return response()->json(['mensaje' => 'NO PUEDE DEJAR CAMPOS OBLIGATORIOS VACIOS'.$e->getMessage(), 'estado' => 'error'], 200);
        }
    }

de esta forma lo corregi pero me tira el mismo error

Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException No message

<div class="modal-footer d-flex justify-content-center">

                    <button  class="btn btn-success"   id="enviar">GUARDAR</button>
            </div>
            {{Form::close()}}
            <div id="resultado"></div>
        </div>

    </div>
</div>

<script>
    function submit (e) {
        $.ajaxSetup({
            header:$('meta[name="_token"]').attr('content')
        });
        e.preventDefault();

        var url = 'gerencia.crear';
        $.ajax({
            type: "POST",
            url: url,
            data: $('#formulario').serialize(),
            dataType:'html',
            success: function (data) {
                var obj=jQuery.parseJSON(data);
                if ((obj.estado=='ok')){
                    alert(obj.mensaje);
                    {{--window.location="{{route('gerencia_inicio') }}"--}}
                }else{
                    alert(obj.mensaje);
                    $('#enviar').removeAttr("disabled");
                }
            }
        });
    }
    window.onload = function () {
        $('formulario').on('submit',submit)
    }
</script>

</html>
3
  • No entiendo del todo la pregunta, ¿Quieres validar los datos en Laravel y que te diga que campos tienes mal? Commented el 19 mar. 2019 a las 16:01
  • Lo que quiero es que me muestre los campos que estan vacios y que son requeridos
    – JLORLANDO
    Commented el 19 mar. 2019 a las 16:01
  • por que cuando lo envio y son requeridos no me enviara el post hasta que los llene pero quiero que me muestre cuales son esos campos que estan vacios para llenarlos y posteriormente enviarlo
    – JLORLANDO
    Commented el 19 mar. 2019 a las 16:02

1 respuesta 1

1

El evento submit añádeselo al form, asi al hacer click en el button, hará la validación HTML. Poner el evento submit en el botón es un error bastante común.

Desconozco si el form helper de Laravel te permite añadir eventos en HTML, pero siempre podemos ponérselo en JS:

<script>
    function submit () {
        $.ajaxSetup({
            header:$('meta[name="_token"]').attr('content')
        });
        e.preventDefault();

        var url = 'gerencia.crear';
        $.ajax({
            type: "POST",
            url: url,
            data: $('#formulario').serialize(),
            dataType:'html',
            success: function (data) {
                var obj=jQuery.parseJSON(data);
                if ((obj.estado=='ok')){
                    alert(obj.mensaje);
                    {{--window.location="{{route('gerencia_inicio') }}"--}}
                }else{
                    alert(obj.mensaje);
                    $('#enviar').removeAttr("disabled");
                }
            }
        });
    }

    window.onload = function () {
       $('#formulario').on('submit',submit)
    }
</script>
5
  • una consulta como le añado el evento subtmit al formulario por que me imagino que es en el tipo como se envia si es post o get de antemano gracias
    – JLORLANDO
    Commented el 19 mar. 2019 a las 16:24
  • En el script que te he puesto, estamos asignando el evento por JS. No te haria falta asignarlo en forma HTML. Como estás haciendo una llamada AJAX, tanto el metodo como el action del formulario nos da un poco igual, ya que estas definiendo tu en AJAX como quieres enviarlo. Commented el 19 mar. 2019 a las 16:26
  • ahi lo corregi pero me tira el mismo error no me envia los datos ahi si pudieras revisar
    – JLORLANDO
    Commented el 19 mar. 2019 a las 16:34
  • o ya lo resolvi solo faltaba agregarle # al id de formulario de lo que me dijiste muchas gracias por tu ayuda
    – JLORLANDO
    Commented el 19 mar. 2019 a las 16:37
  • Pues se me había pasado. Lo edito entonces Commented el 19 mar. 2019 a las 16:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.