Validación de valores y campos requeridos en Meta Boxes personalizados

Question

Validación de valores y campos requeridos en Meta Boxes personalizados

12 sept 2010, 19:48:27

Vistas: 20.6K

Votos: 17

Algo que nunca he visto cubierto es la mejor manera de validar que ciertos campos de formulario se completen correctamente para las meta boxes de tipos de contenido personalizados.

Busco obtener opiniones expertas sobre cómo validar mejor los campos personalizados para cualquier metabox que uno pueda crear. Mis intereses son:

asegurar que la validación de campos se realice antes de que la entrada sea publicada/actualizada
utilizar una clase/código que no entre en conflicto con otros javascript de WordPress
permitir definir campos específicos como requeridos mientras otros podrían ser opcionales
validar campos basándose en reglas personalizables incluyendo expresiones regulares para cosas como formato de email
controlar la visualización de errores/avisos

¡Gracias por adelantado!

NetConstructor.com

4.41K

campo personalizado personalización javascript jquery

Todas las respuestas a la pregunta

Comentarios

Gracias, lo probaré mañana, pero ¿podrías explicarme cómo hacer diferentes validaciones? Por ejemplo, validar una dirección de correo electrónico correcta, validar que no haya más de o al menos XX caracteres, que un campo del formulario esté completado... cosas así?

NetConstructor.com

29 sept 2010 11:54:24

Además, ¿esto se valida antes de que el post se guarde/actualice? Si no, ¿cómo puedo hacerlo?

NetConstructor.com

29 sept 2010 11:55:04

Los ejemplos y documentación del plugin jQuery Validation (enlazado en mi respuesta) te mostrarán cómo hacer todo eso. Por defecto, la validación ocurre al enviar, pero puedes activarla al perder el foco (blur) o al cambiar (change) cualquier elemento del formulario para tus campos personalizados.

danblaker

29 sept 2010 20:13:25

Implementé esta solución y parece muy prometedora, pero tengo un problema: ¿qué debo poner en el 'submitHandler'? Después de la validación con jquery.validate, WordPress no hace nada (el botón de guardar permanece en estado animado). ¿Cómo devuelvo el control a WP?

mike23

11 may 2011 12:16:15

Si solo estás intentando que el botón Publicar vuelva a su estado normal cuando un campo requerido está vacío (o falla alguna otra validación), no deberías necesitar hacer nada con el submitHandler; simplemente edita el código validate() para cambiar el botón cuando falle la validación. Esto funciona: jQuery("#post").validate({ invalidHandler: function() { jQuery('#publish').removeClass('button-primary-disabled'); jQuery('#ajax-loading').css('visibility', 'hidden'); } });

danblaker

14 may 2011 01:14:37

Encontré este enfoque para resolver el problema de validar campos de metabox usando código PHP

https://tommcfarlin.com/post-meta-data-error-messages/

Espero que esto te ayude (a mí me funcionó en un escenario similar)

Julio Garcés Teuber

131

9 jun 2016 20:28:48

Comentarios

Aunque este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas que solo contienen enlaces pueden volverse inválidas si la página enlazada cambia.

Gabriel

9 jun 2016 20:50:58

El Código Básico Completo para agregar Validación jQuery:

Cargar el script de validación. Asumo que jQuery ya está cargado.

add_action('admin_enqueue_scripts',function($id){
    $validation',$validation_js_url = #tu fuente de validation.js;
    wp_register_script( 'validation',$validation_js_url,array(),'',true );
    wp_enqueue_script( 'validation' );
});

En el archivo js o etiqueta script:

jQuery(document).ready(function($){
    var form = $("form[name='post']");
    $(form).find("input[type='submit']").click(function(e){
        e.preventDefault();
        $(form).validate();

        if($(form).valid())
        {
            $("#ajax-loading").show();
            $(form).submit();
        }else{
            $("#publish").removeClass().addClass("button-primary");
            $("#ajax-loading").hide();
        }
    });
});

Listo :)

Ijas Ameenudeen

121

15 may 2012 20:50:40

Comentarios

¿Y qué hay del lado del servidor?

NetConstructor.com

28 jun 2012 09:12:31

Usé este código, muy útil, solo cambié:

$(form).find("input[type='submit']").click(function(e){

Por:

$(form).find("#publish").click(function(e){

Porque si tienes otro formulario dentro del formulario principal, esto inicia el script.

Y:

$(form).submit();

Por:

$(this).submit();

Porque la primera línea solo guarda el post como borrador y no puedes publicarlo más.

Escribí todo aquí: http://allgraphics.it/blog/2012/10/jquery-validation-sui-campi-di-input-postcustom-post-di-wordpress/

Ricky

21

20 nov 2012 12:46:42

Si deseas poder validar en el lado del servidor, la opción más fácil es usar Advanced Custom Fields para definir tus diseños de campos personalizados, y luego el complemento Validated Field para establecer tu validación por campo en el Admin de WordPress.

doublesharp

515

24 jun 2015 01:47:38

danblaker 417 · Accepted Answer · 2010-09-28T01:13:07Z

La forma más sencilla es añadir validación Javascript mediante el plugin jQuery Validate. Aquí tienes una guía básica:

Cerca de tu llamada add_meta_box, incluye el plugin jQuery Validate y un archivo JS para tu script simple:

add_action('admin_enqueue_scripts', 'add_my_js');   
function add_my_js(){    
  wp_enqueue_script('my_validate', 'ruta/a/jquery.validate.min.js', array('jquery'));
  wp_enqueue_script('my_script_js', 'ruta/a/my_script.js');
}

Luego en my_script.js incluye lo siguiente:

jQuery().ready(function() {
    jQuery("#post").validate();
});

Esto habilitará la validación en el formulario de entrada. Luego, en el callback add_meta_box donde defines los campos personalizados, añadirías una clase "required" para cada campo que deseas validar, así:

<input type="text" name="my_custom_text_field" class="required"/>

Todos los campos con "required" en su clase serán validados cuando la entrada sea guardada/publicada/actualizada. Todas las demás opciones de validación (reglas, estilos de error, etc.) pueden configurarse en la función document.ready en my_script.js; consulta la documentación de jQuery Validate para ver todas las opciones.