Onclick validar formulario, si es válido solo enviar formulario

Question

Jul 20, 2016, 08:54 AM

jquery-validate jquery forms bootstrap-modal

Onclick validar formulario, si es válido solo enviar formulario

Tengo un formulario html que primero deseo validar con la biblioteca de validación jQuery jquery.validate.min.js ysi el formulario es válido, envíe el formulario a una ubicación.

He intentado lo siguiente:

<html>
    <head>
        <link rel="stylesheet" href="../../common/view/css/bootstrap.min.css" type="text/css">
        <script src="../../common/view/js/jquery.js"></script>
        <script src="../../common/view/js/bootstrap.min.js"></script>
        <script src="../../common/view/js/jquery.validate.min.js"></script>

    </head>

    <body>
        <form method="post" action="stock-c.php" id="issueform" name="issueform">
            <input type="text" name="pid"/>
            <input type="button" name="button1" id="button1"/>
            <script type="text/javascript" src="js/issueValidation.js"></script>

            <!--Modal-->             
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                     <!--info to be displayed-->
                     <input type="submit" value="submit"/> <!--Explain1-->
                </div>
            </div>


        </from>
    </body>
</html>

issueValidation.js

$( document ).ready( function () {          
$validator= $( "#issueform" ).validate( {
        rules: {
                pid: "required",
        },
        messages: {
                pid: "Please enter a value",
        },
        errorElement: "em",
        errorPlacement: function ( error, element ) {
                // Add the `help-block` class to the error element
                error.addClass( "help-block" );

                if ( element.prop( "type" ) === "checkbox" ) {
                        error.insertAfter( element.parent( "label" ) );
                } else {
                        error.insertAfter( element );
                }
        },
        highlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
        },
        unhighlight: function (element, errorClass, validClass) {
                $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
        }
});

$('#button1').on('click', function() {
    $("#issueform").valid();    //everything works upto here
    if($validator.noOfInvalids()===0){     //this code doesn't work
        $('#myModal').modal('toggle');
    }
});

});

Explicar1: Coloqué mi botón de envío en la clase modal que está dentro de las etiquetas del formulario, de modo que cuando se hace clic se envían los datos del formulario.

Idealmente, quiero detener el envío hasta que se valide el formulario. Si el formulario es válido, debo poder revisar los datos de mi formulario en el modal y hacer clic en el botón Enviar, para que el envío se realice.

Intenté usar submitHandler en el complemento de validación jQuery (que se ejecuta solo cuando no hay inválidos en el formulario) para inicializar el modal, pero para hacerlo necesito cambiar la entrada [type = "button"] para ingresar [type = "submit "] ya que el controlador solo funciona en el botón Enviar. Luego termino con dos botones de envío en el mismo formulario y el formulario no se envía correctamente.

Por favor, ayúdame a rectificar este problema. Como resumen, necesito validar los datos ingresados en un formulario y solicitar la confirmación del usuario en un modo. Si el usuario confirma en modal, los datos en el formulario se envían. Si mi método es un método innecesario para lograr este resultado, las sugerencias alternativas también son bienvenidas siempre y cuando cumpla con los requisitos establecidos anteriormente. Gracias.