none
validador de campos en un modal RRS feed

  • Pregunta

  • Buenas tardes, 

    Tengo el siguiente problema,  tengo un modal y en el modal tengo los validadores para campos obligatorios; en el modal manejo 3 pestañas, ejemplo: en la pestaña 1 tengo un texto para digitar la cedula, si no hay nada, me sale el aviso "es obligatorio", pero el problema esta que me deja continuar a la segunda pestaña.  No se como hacer que no pase a la siguiente pestaña del modal hasta que diligencie algo.

    EL modal es esto

        <div class="modal hide fade" id="cuentaFormEditModal" role="dialog">
            <div id="cuentaEditWizard" class="stWizard">
                <button type="button" class="close" data-bind="click: htmlNewForm" style="margin-right: 8px;" data-dismiss="modal">&times;</button>
                <div class="modal-header">
                    <div class="row-fluid center">
                        <div class="span12" style="font-size: 0; text-align: center;">
                            <div class="step-title">
                                <span class="step-order">1</span>
                            </div>
                            <div class="step-title">
                                <span class="step-order">2</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row-fluid">
                        <div class="span12 clearfix" id="cuentaFormEditModalContent">

                            <div class="step-content">
                                <div class="alert alert-error hide" id="formErrorAlert">
                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                                    <strong>Error!</strong> Ha ocurrido un error procesando la operacion.
                                </div>
                                <form id="editarCuentaForm" class="form-horizontal">
                                    <div class="control-group">
                                        <label class="control-label" for="cuenta1"></label>
                                        <div class="controls">
                                            <input type="text" id="cuentaa1" name="cuenta1" placeholder="ej. 5507976" class="validate[required,custom[onlyNumberSp]]" data-bind="value: current.cuenta1">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" for="idBanco">Banco</label>
                                        <div class="controls">
                                            <select name="idBanco" id="idBancoo" class="validate[required]" data-bind="options: bancos, optionsText: 'nombre', optionsValue: 'id', value: current.idBanco, optionsCaption: 'Seleccione...'">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" for="idBanco">Tipo cuenta</label>
                                        <div class="controls">
                                            <select name="idBanco" id="idTipoCuentaa" class="validate[required]" data-bind="options: tiposCuentas, optionsText: 'nombre', optionsValue: 'id', value: current.idTipoCuenta, optionsCaption: 'Seleccione...'">
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="step-content">
                                <p>
                                    ¿Desea guardar los cambios efectuados?
                                </p>
                            </div>
                            <div style="clear: both;"></div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="next-button btn hide">Siguiente</button>
                    <button class="submit-button btn" data-bind="click: saveEditChanges">Guardar </button>
                    <button class="back-button btn">Anterior</button>
                </div>

            </div>
        </div>

    miércoles, 6 de noviembre de 2013 20:08

Todas las respuestas

  • hola

    este html que muestras corresponde al render de la vista en el browser ? o es el contenido de la view original como lo tienes en el proyecto asp.net mvc

    las validaciones las aplicas con Data Annotations ? o sea pones atributos en la entidad que defines como Model

    defines que la validacion sea e el cliente de forma unobtrusive

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina

    miércoles, 6 de noviembre de 2013 23:55
  • Hola Leandro,

    1. El html es del contenido de la view original
    2. las validaciones las realizo utilizando "Bootstrap" con la siguiente linea que se encuentra en le HTML:  <input type="text" id="cuentaa1" name="cuenta1" placeholder="ej. 5507976" class="validate[required,custom[onlyNumberSp]]" data-bind="value: current.cuenta1">

    3. la Validación se define en el cliente.

    Gracias.


    jueves, 7 de noviembre de 2013 0:17
  •  las validaciones las realizo utilizando "Bootstrap"

    interesante

    entonces me pregunto, donde defines el Html.BegingForm() para realizar el submit

    porque veo que defines 3 botones, pero estos que accion realizan? como invocas a los action del controlador

    porque de alguna forma si el submit() lo realizas usando jquery deberias poder desde las validaciones de Bootstrap poder preguntar si el <form> isvalid() o algo similar para conocer si puedes dejar continuar con la invocacion al action o no

    saludos


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina

    jueves, 7 de noviembre de 2013 2:11
  • los botones siguientes y anterior, tienen la clase : class="next-button btn hide" y class="back-button btn" respectivamente, por como se esta utilizando booststrap supongo que este realiza el llamado a las vista definidas previamente :
         <div class="span12" style="font-size: 0; text-align: center;">
                            <div class="step-title">
                                <span class="step-order">1</span>
                            </div>
                            <div class="step-title">
                                <span class="step-order">2</span>

    el boton de guardar si tiene 
    data-bind="click: saveEditChanges donde realizo el llamado al controlador por medio de Jquery utilizando Json.

    ¿ no se si depronto al colocar un evento jquery en el boton siguiente pueda servir, pero donde lo colocaría y como sería?

    GRacias..

    jueves, 7 de noviembre de 2013 13:05
  • como que realiza el llamado a las vistas ? mvc requiere que se invoque un action de un controller

    puedes validar que la funcionalidad invoca action de un controlador ?

    el boton de guardar si tiene data-bind="click: saveEditChanges donde realizo el llamado al controlador por medio de Jquery utilizando Json.

    en esta funcion de javascript tienes algun codigo que verifica si las validaciones son correctas ?

    se que el plugin de jquery para validar tiene un isvalid() que podrias usar, pero la verdad desconezco si boostrap usa esto mismo


    Leandro Tuttini

    Blog
    Buenos Aires
    Argentina

    jueves, 7 de noviembre de 2013 13:20
  • Hola Albert8601

    ¿Qué plugin estás usando para el modal?

    Mi recomendación para lo que expones, es que captures el evento de darle pasar al siguiente botón y realices una validación de los campos en ese instante.

    También puedes mirar este ejemplo http://jquerytools.org/demos/tabs/wizard.html


    "En los momentos de crisis, sólo la imaginación es más importante que el conocimiento"
    MCTS | SharePoint 2010, Application Development
    MCTS | SharePoint 2010, Configuring
    MS | Programming in HTML5 with JavaScript and CSS3 (MS), Developing ASP.NET MVC 4 Web Applications
    Twitter | @saintwukong

    viernes, 15 de noviembre de 2013 2:26