Pregunta sobre Developing with WordPress de Wordpress:

La validación de JQuery solo acepta entradas específicas en el cuadro de búsqueda

Un usuario preguntó 👇

Hola, estoy buscando una forma de personalizar la barra de búsqueda predeterminada para aceptar una entrada específica. Mi sistema operativo es Windows 10 y estoy usando la última versión de wordpress. El objetivo final es aceptar solo la entrada en la forma xay, donde xey son números entre 1 y 999, y la letra es a (ejemplos de entrada aceptable: 1a2, 222a999, 130a28). Pero antes de hacer esto, quiero encontrar un objetivo más simple, que es aceptar una entrada alfanumérica de al menos 3 y una longitud máxima de 7.

Las instrucciones en Internet dicen que se deben hacer 2 cosas: escribir un script jQuery que controle la entrada y escribir una función para enriquecer el script. En el directorio wp-content theme mytheme js Yo creé el archivo cuadro de búsqueda.js con este código dentro:

jQuery(function(){
        $("#btn-search").click(function(){
        $(".error").hide();
        var hasError = false;
//        var searchReg = /^[a0-9]+$/;
        var searchReg = new RegExp('/^[a0-9]+$/');
        var searchVal = $("#search-text").val();
        if(searchVal == '') {
            $("#search-text").after('<span class="error">Please enter a search term.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
            $("#search-text").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

Esto debería verificar si la entrada está vacía y si solo hay números y la letra a. No estoy seguro de la sintaxis correcta de la variable searchReg.

Luego en el archivo functions.php Agregué el siguiente código:

function add_my_script() {
   wp_enqueue_script( 'searchbox', get_template_directory_uri() . '/js/searchbox.js', array('jquery'), '20190530', true );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Pero después de hacer esto, el comportamiento de la barra de búsqueda sigue siendo el mismo, es decir, acepta entradas vacías y entradas no alfanuméricas. Al explorar el sitio con Chrome, la consola advierte de «Error TypeEraught: $ no se aplica». Reemplazar la palabra clave «jQuery» con los símbolos $ en el script del cuadro de búsqueda corrige el error, pero el comportamiento de la barra de búsqueda sigue siendo el mismo.

No entiendo lo que estoy haciendo mal, ¿alguien podría ayudarme? Gracias

Este tema fue modificado hace 1 año, 6 meses por. Este tema fue modificado hace 1 año, 6 meses por.

(@crouchingbruin)

Hace 1 año, 6 meses

¿Tiene una página de prueba que podamos explorar?

(@giannit)

Hace 1 año, 6 meses

Gracias por la respuesta. Instalé wordpress en localhost, así que supongo que no puedo enviarte una URL. Quizás podría darte más información, por ejemplo, estoy usando el tema inicial con guiones bajos.me (pero probé Twenty Nineteen sin éxito). Además, creé el archivo searchform.php para modificar el ocupante de la barra de búsqueda, y funcionó. Pero no puedo ejecutar el script jQuery. ¿Podría editar mi secuencia de comandos para permitirle comprobar que la entrada no está vacía? De esta forma simplificaremos el script y reduciremos las posibilidades de un posible error. Gracias por la ayuda.

(@crouchingbruin)

Hace 1 año, 6 meses

Así que supongo que la identificación está en el campo de búsqueda. buscar texto asignado a él, y el ID está en el botón de búsqueda btn búsqueda asignado a él.

Lo primero que haría es llamarlo alerta () solo para que sepa que se está haciendo clic en el botón y puede leer el valor en el campo de búsqueda. Es decir, puede ingresar esta línea después de haber completado la tarea para la variable searchVal:
alert("The content of the search field is " + searchVal);
Luego, al hacer clic en el botón, un cuadro de diálogo de contenido debería abrir todo lo que ingresó en el campo de búsqueda.

En segundo lugar, antes de que te compliques demasiado tratando de meterte con functions.php, simplemente inserta el código en una publicación y mira si puedes hacer que funcione. Lo que haría es copiar el código en un bloque HTML personalizado en la publicación. Aquí hay un ejemplo que hice usando su código. También agregué otro bloque HTML personalizado para mantener un campo de entrada y un botón de entrada, ya que mi sitio no tiene un campo de búsqueda. El único cambio que hice en su código fue simplificar la frase de RegEx para buscar la letra «a» en cualquier parte de la cadena:

<script>
jQuery(document).ready(function($){
   // Add an event handler to the Search button
   $("#btn-search").click(function(){
        $(".error").hide();
        var hasError = false;
        var searchReg = new RegExp('a');
        var searchVal = $("#search-text").val();
        if(searchVal == '') {
            $("#search-text").after('<span class="error">Please enter a search term.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
            $("#search-text").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        } else {
            $("#search-text").after('<span class="error">Looks good!</span>');
        }
        if(hasError == true) {return false;}   });
});
</script>

El único otro código jQuery que agregué fue el bloque de salida «¡Se ve bien!» si no hubo errores. Por lo tanto, si hace clic en el botón de entrada sin nada en el campo, obtendrá «Ingrese un término de búsqueda», si ingresa una cadena que no tenga «a», obtendrá «Ingrese texto válido» y si ingresa una cadena con «a», obtiene «¡Se ve bien!» (que puede eliminar después de haber probado todo).

Entonces, una vez que eso funcione, puede probar la expresión RegEx correcta, luego analizar el campo de entrada y finalmente intentar integrarlo en la aplicación de búsqueda de WordPress usando functions.php. Comience con pequeños pasos y aumente gradualmente la complejidad.

(@giannit)

Hace 1 año, 6 meses

Muchas gracias por el tiempo que dedicaste a responder tu respuesta, te lo agradezco.

En cuanto al ID del campo de búsqueda y el ID del botón de búsqueda, no sé si realmente son buscar texto y btn búsqueda. Lo siento, soy muy nuevo en WordPress, encontré el script jQuery en una guía y lo uso en mi sitio. Realmente no sé si son las identificaciones correctas. ¿Cómo puedo verificar que sean correctos?

Además, escribí el alerta () justo después del var searchVal línea, luego actualicé el archivo (ahora estoy usando el Editor de temas incorporado para hacer los cambios instantáneamente), pero después de presionar el botón de búsqueda no se abrió ningún diálogo. En este punto, creo que las ID no son correctas, por lo que el script no está en uso en la barra de búsqueda. ¿Es este el problema?

Finalmente, creé una publicación y copié el código que proporcionaste en un bloque HTML personalizado. Pero en la página, como puede ver en este vídeo Lo hice, la barra de búsqueda no se muestra.

El sitio no parece ver el código. ¿Qué pasa? Gracias por toda tu ayuda.

(@crouchingbruin)

Hace 1 año, 6 meses

Bien, como desarrollador, una herramienta que es muy útil para descubrir qué podría estar mal en su sitio web, o en la estructura del mismo, es el Inspector creado por el navegador. En Chrome, se llama DevTools. Básicamente, si desea ver la estructura del sitio, haga clic derecho en un objeto en la página web y haga clic en Examinar o Inspección de elementos (dependiendo del navegador que esté utilizando) y se abrirá el panel Inspector. El panel izquierdo le mostrará la estructura (HTML) del sitio, resaltará el objeto que se está inspeccionando y el panel derecho le mostrará el CSS asociado con cualquier objeto que esté explorando.

Así que haga clic con el botón derecho en el botón Buscar, por ejemplo, y seleccione Examinar en el menú emergente. El código de ese botón aparecerá en el panel izquierdo del Inspector. Deberías hacer algo como:
<input type=button name="Search" id="btn-search">

En lo que respecta a su página de prueba, pensé que ya tenía un campo de búsqueda definido y un botón de búsqueda en su sitio. Como no puede, puede agregarlos abriendo y pegando otro bloque HTML personalizado en este código:

<div><input type="text" id="search-text"></div>
<div><input type="button" value="Search" id="btn-search"></div>

Esto creará tanto el campo de búsqueda como el botón de búsqueda, y los ID correspondientes asociados con ellos.

(@giannit)

Hace 1 año, 6 meses

Muchas gracias por explicarnos todos los detalles, eres muy amable. Exploré el botón de búsqueda y la barra de búsqueda en general, este código

<section id="search-2" class="widget widget_search">
	<form role="search" method="get" class="search-form" action="http://localhost/matesvolta/">
		<label>
			<span class="screen-reader-text">Search for:</span>
			<input type="search" class="search-field" placeholder="Search …" value="" name="s">
		</label>
		<input type="submit" class="search-submit" value="Search">
	</form></section>

Al parecer, no hay identificaciones. ¿Qué significa esto?

Agregué su código a la página de «validación del campo de entrada» para ingresar al formulario de búsqueda. Se agregan la barra y el botón, pero cuando hago clic en el botón no pasa nada. Muchas gracias

Esta respuesta fue modificada hace 1 año, 6 meses. Esta respuesta fue modificada hace 1 año, 6 meses. Esta respuesta fue modificada hace 1 año, 6 meses.

(@crouchingbruin)

Hace 1 año, 6 meses

De acuerdo, su campo de búsqueda y su botón no tienen una identificación, pero ambos tienen una clase. La clase no es tan buena, porque se supone que cada elemento tiene una identificación única, pero sospecho que habrá más de un campo de búsqueda y un botón de búsqueda con los mismos nombres de clase en una página, por lo que debería ser bastante seguro usa la clase.

De todos modos, en tu guión, quieres cambiar # buscar texto a .campo de búsqueda, y cambio # btn-search a .search-enviar. Tenga en cuenta el punto en el frente, en lugar de un signo de libra. El período indica un nombre de clase en lugar de una identificación.

Entonces, debido a que el script de muestra no funciona, también desea asegurarse de que la biblioteca jQuery esté incluida en la página web. Haga una «vista de código fuente» de la página web y busque jquery. Estas buscando algo como jquery.js o jquery.min.js. Además, cuando está en el Inspector, si hace clic en el Consola elemento de menú, puede ver si hay errores de codificación en esa página.

(@giannit)

Hace 1 año, 6 meses

Gracias por el largo apoyo de CrouchingBruin.

En la página de «validación del campo de entrada», en el bloque relativo al script jQuery, cambié # search-text a .search-field y # btn-search a .search-submit. Luego, en el bloque relativo a la barra de búsqueda, agregué el código de 2 líneas, con

<div><input type="text" id="search-text"></div>
<div><input type="button" value="Search" id="btn-search"></div>

pero la barra de búsqueda no hace nada cuando hago clic en el botón.

Para el biblioteca jQuery, buscando en el código fuente de la página de inicio y buscando jquery, son las dos primeras líneas que contienen el término

<script type='text/javascript' src='https://localhost/matesvolta/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='https://localhost/matesvolta/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>

Mirando a la Consola cuando está en la página de inicio, no hay mensajes de error (texto rojo), pero hay un mensaje (texto negro) que dice “JQMIGRATE: Migrate está instalado, versión 1.4.1” con un enlace al archivo “jquery-migrate.min”. js? ver = 1.4.1: 2 ”.

Al mirar la consola mientras está en la página de «validación del campo de entrada», hay un error (texto rojo) que dice «SyntaxError Uncaught: Unexpected token <" con un enlace a "(índice): 139". Al hacer clic en él, se abre la pestaña Fuentes y se muestra un script sobre el plugin WP QuickLatex que utilizo para escribir fórmulas en el sitio. No creo que sea un problema de importación. El caso es que este error solo se muestra en la página de “validación del campo de entrada”, aunque no se muestra en las páginas que contienen fórmulas.

De todos modos, la página jQuery parece estar incluida en la página web, ya que en la fuente ambas líneas están bajo jquery.js y jquery-migrate.min.js. ¿No estaba?

Editar 1
Otra cosa extraña, si un resultado de búsqueda que usa la barra de búsqueda predeterminada es «No se encontraron resultados» se muestran dos barras de búsqueda, como puedes ver al respecto captura de pantalla. Esto también sucede usando el tema oficial Twenty Nineteen.

Editar 2
¡Algo está funcionando! Usando el código

jQuery(function(){
        jQuery(".search-submit").click(function(){
        jQuery(".error").hide();
        var hasError = false;
        var searchReg = new RegExp('a');
        var searchVal = jQuery(".search-field").val();
        alert("The content of the search field is " + searchVal);
        if(searchVal == '') {
            jQuery(".search-field").after('<span class="error">Please enter a search term.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
            jQuery(".search-field").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

sa cuadro de búsqueda.js archivo ahora que está funcionando correctamente, ese es el mensaje emergente con el valor de searchVal mostrado, y también en los casos de entradas vacías o entradas que no tienen el carácter «a», los mensajes se muestran y la búsqueda no se realiza! Así que el principal problema eran las identificaciones incorrectas, gracias por ellas. El problema menor fue el error «Uncaught TypeError: $ is not function», que se puede solucionar reemplazando todos los «$» con «jQuery».

Muchas gracias CrouchingBruin, eres mi héroe, ¡agradezco tu ayuda y largo apoyo! ¿Podemos decir que el problema está resuelto?

Ahora necesito entender el problema debajo de las dos barras de búsqueda que muestran cuando regresa una búsqueda de «Nada encontrado», y mejorar el script jQuery para lograr el objetivo inicial «xay».

Pero voy a intentar solucionarlos yo mismo, y en caso de problemas preguntaré en el foro. Gracias CrouchingBruin, me salvaste de la locura

Esta respuesta fue modificada hace 1 año, 6 meses. Esta respuesta fue modificada hace 1 año, 6 meses. Esta respuesta fue modificada hace 1 año, 6 meses. Esta respuesta fue modificada hace 1 año, 6 meses.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *