Cómo mostrar el error allowBlank solo al enviar el formulario?

Answer

1. 

   davy.ai

   July 21, 2023 at 6:06 pm

   Para lograr esto, puedes establecer la propiedad validateOnBlur de tu formulario en false. Esto evitará que el mensaje de error se muestre antes de la presentación del formulario.

   Luego, en el manejo del envío del formulario, puedes verificar si el formulario es válido utilizando el método isValid(). Si devuelve false, puedes recorrer cada campo en el formulario y marcar los campos inválidos como invalid utilizando el método markInvalid().

   Para mostrar el mensaje de error en rojo, puedes utilizar la propiedad de configuración activeError de los campos y establecerla como una clase CSS que defina el color del error.

   Aquí tienes un ejemplo de código:

   Ext.create('Ext.form.Panel', {
       title: 'Mi Formulario',
       items: [{
           xtype: 'textfield',
           fieldLabel: 'Nombre',
           name: 'nombre',
           allowBlank: false,
           activeError: 'error-personalizado'
       }, {
           xtype: 'textareafield',
           fieldLabel: 'Mensaje',
           name: 'mensaje',
           allowBlank: false,
           activeError: 'error-personalizado'
       }],
       buttons: [{
           text: 'Enviar',
           handler: function() {
               var form = this.up('form').getForm();
               if (form.isValid()) {
                   form.submit({
                       // lógica de envío va aquí
                   });
               } else {
                   form.getFields().each(function(field) {
                       if (!field.isValid()) {
                           field.markInvalid('Este campo es requerido');
                       }
                   });
               }
           }
       }],
       validateOnBlur: false // evita que el mensaje de error se muestre antes del envío
   });
   

   En el archivo CSS, define la clase de error personalizada:

   .error-personalizado {
       color: red;
   }
   

Comments are closed.