jquery validate in modal window with ajax jquery ui

Question

jquery validate in modal window with ajax jquery ui

Navigation

#1 by (0 votes)

0

<form id="formularioanadir" enctype="multipart/form-data">
titulo pelicula: <input type="text" id="atitulo" name="titulo"  value=""  required/><br>
director: <input type="text" id="adirector" value="" required /><br>
genero: <select id="agenero">
<?php
$consulta = "SELECT idGenero, genero
			FROM genero";
$res = $lnk->query($consulta);
while ($fila2 = $res->fetch_object()){?>
<option value="<?= $fila2->idGenero?>"><?= $fila2->genero?></option>
<?php } ?>
</select>
<br>
fecha:  <input type="text" id="afecha"  value="" required/>

<!--<input type="file" name="file" value="subir archivo">-->
</form>

Hello friends, I have the following code in which I try to validate a modal window with jquery validate but I do not know how to do it:

$( "#anadir" ).dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        buttons: {
        "Guardar": function() {     
            $("#formularioanadir").validate({
                //aqui si no valida iria el codigo patra mostrar
                               //en el formulario si valida entoces mandaria por post tal como 
                              //sigue
              });


            $.post("anadirPelicula.php", {
                titulo : $("#atitulo").val() ,
                director : $("#adirector").val() ,
                fecha: $("#afecha").val() ,
                idgenero: $("#agenero").val()
            },function(data,status){                
                $("#listar").html(data);
                $("#formularioanadir")[0].reset();
            })//get         

            $(this).dialog( "close" );                                              
                    },
        "Cancelar": function() {

                $(this).dialog( "close" );

        }



        }//buttons
    });

jquery

asked by trevol 02.04.2018 в 12:41

source

1 answer

Problem when starting modal for the second time Problem making text JUnit in textsfield

score 0 · Answer 1

You can use the create event in the dialog to validate

$( '#anadir' ).dialog({
    autoOpen: true,
    modal: true,
    //Utilizas la función create
    create : function(){
        $( '#formularioanadir' ).validate({
                rules: {
                    atitulo: { required: true },
                    adirector: { required: true },
                    afecha: { required: true}
                },

                submitHandler: function( form ) {
                    $( this ).dialog( 'close' );

                    // ... Aquí pones el Ajax 

                } //fin submitHandler
            }); 
    },
    buttons: {
        'Create': function() {
    $("#formularioanadir").valid();
        //fin validate()
        },
        Cancel: function() {
            $( this ).dialog( 'close' );
        }
    } //fin buttons
}); //fin Create Form Modal

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />

<div id="anadir" title="Añadir nueva pelicula">
<form id="formularioanadir" enctype="multipart/form-data">
    titulo pelicula: <input type="text" id="atitulo" name="atitulo"/><br>
director: <input type="text" id="adirector" name="adirector"/><br>
genero: <select id="agenero">
</select>
<br>
fecha:  <input type="text" id="afecha"  name="afecha" value=""/>
</form>
</div>