0

Tengo un formulario con validaciones en los DataAnnotations Required y con las librerías de jQuery Validation, todo esto funciona perfectamente, pero quisiera saber si de alguna manera puedo habilitar el botón Submit solo cuando el formulario sea valido, pues valide si podía acceder desde razor al ModelState y de esta manera controlarlo pero no fue posible. Agradezco su colaboración.

4
  • Hola Jager. "Quisiera saber si de alguna manera puedo habilitar el botón Submit sólo cuando el formulario sea valido". Sí. Sí puedes. Cargas la vista con el botón deshabilitado y a través de javascript verificas que los campos sean válidos, y habilitas el botón en caso que lo sean. Espero te sirva. Saludos!
    – Arriel
    Commented el 27 abr. 2022 a las 20:47
  • Si, comprendo que de esta manera podría solucionarlo, pero en el caso de MVC los DataAnnotations hacen esta funcionalidad directamente en la vista con jQuery Validation, pero la idea seria no crear una funcion de javascript para validar los campos, si no utilizar de alguna manera el jQuery Validation que renderiza MVC. Commented el 27 abr. 2022 a las 20:59
  • Lo que quieres es que, de alguna manera el [DataAnnotation] sepa que existe un botón de tipo submit que tenga que renderizar en la vista, que nunca ha sido declarado en la clase, y que cree el código javascript para habilitar el botón cuando le das click? Ya leíste la documentación de jQuery Validation para saber si lo que pides es posible?
    – Arriel
    Commented el 27 abr. 2022 a las 21:15
  • Lectura recomendada: es.meta.stackoverflow.com/a/4433/822
    – fredyfx
    Commented el 27 abr. 2022 a las 21:26

1 respuesta 1

0

Logre encontrar la siguiente solución.

Ya con las validaciones de los [DataAnnotation] y las librerías de jQuery Validation se puede acceder a la validación del formulario validando por eventos en los controles input o select de la siguiente manera:

    $(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input').keyup(function() {
         var form = $( "#CreateForm" );
        if(form.valid()) {
           ValidateForm();
        }else{
            ValidateForm();
        }
     });
     $('select').change(function() {
         var form = $( "#CreateForm");
        if(form.valid()) {
           ValidateForm();
        }else{
            ValidateForm();
        }
     });
 });

});

Se podría ajustar el evento al que se desee.

function ValidateForm(){
   var form = $( "#CreateForm" );
   if(form.valid()) {
      $(':input[type="submit"]').prop('disabled', false);
   }else{
      $(':input[type="submit"]').prop('disabled', true);
   }
}

El form.valid() devuelve el valor booleanodependiendo de los [DataAnnotation], ya las líneas $(':input[type="submit"]').prop('disabled', false); cambian el input submit de disabled a enableb respectivamente.

Tambien se puede validar en la documentación de jQuery como lo menciono @ariel

1
  • Excelente! Gracias por la explicación!
    – Arriel
    Commented el 28 abr. 2022 a las 1:58

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.