1

la duda que tengo es la siguiente como podría hacer para que al momento de seleccionar un tipo de dato en este caso numérico o alfanumérico mi otro campo me valide el dato que se ingresara dependiendo del tipo de dato que se selecciono.

introducir la descripción de la imagen aquí

Nota: Cuando hice la validación y seleccionaba numérico el campo lo validaba correctamente, pero cuando intentaba seleccionar alfanumérico ya no me permitía ingresar ninguna cadena y solo permitía valores numéricos.

Actualización: En esta actualización tratare de explicar mas a detalle el problema. El combobox tiene un evento change y según el tipo que se selecciona el campo valida si se ingresa datos numéricos o alfanumérico usando keyup. En mi demo que realice funciona bien cuando el dato es numérico, pero cuando intento cambiar el tipo de numérico a alfanumérico el campo ya no me permite ingresar datos alfanumérico pero si numéricos.

introducir la descripción de la imagen aquí

1
  • Bienvenido a Stack Overflow en español, te sugiero que hagas el recorrido de bienvenida y, de paso, ganar tu primera medalla. También es importante que leas Cómo preguntar y ejemplo mínimo verificable para poder mejorar tus preguntas y que sean bien recibidas por la comunidad, de esta manera favoreces a que los usuarios las respondan y te ayuden. Muestra qué has intentado y los errores que te daba para que sea más fácil ayudarte :)
    – Rabegi
    Commented el 15 may. 2019 a las 7:18

2 respuestas 2

0

Formulario HTML:

<form action="yoqsetio" method="post" id="formulario">
    <select name="numericAlphanumeric">
        <option value="alphanumeric">Alfanumérico</option>
        <option value="numeric">Numérico</option>
    </select>
    <input type="text" name="data">
    <input type="submit" value="enviar">
</form>

JavaScript:

    const validaFormulario = (form) => {
        const formData = form.data
        const numAlpha = form.numericAlphanumeric

        if (numAlpha.value === 'alphanumeric') {
            // Es alfanumérico
        }

        if (numAlpha.value === 'numeric') {
            // Es numérico
        }

        // La función tiene que devolver algo en algún momento para que saber 
        // si la comprobación es correcta o no
    }

    document.getElementById('formulario').addEventListener('submit', function (e) {
        e.preventDefault()
        if (validaFormulario(this)) {
            // Validación correcta, envía el formulario
            // this.submit()
        } else {
            // Manejo de error
        }
    })

Otra opción es validarlo con expresiones regulares, pero creo que así queda más claro. También puedes usar el evento 'keyup' para comparar según vas escribiendo en el input texto.

0

A continuación te dejo un ejemplo explicado, si no entendí mal, este es tu propósito, la idea es que al oprimir el botón valide si el input debe recibir solo texto o solo numeros dependiendo la opción seleccionada en el select. Sin embargo, te dejo este ejemplo y espero te ayude en algo:

$('.btnValidation').on('click', function() {
  //Obtenemos los valores del select y del input
  let selectValor = $('.jsSelect').val();
  let inputValor = $('.jsInput').val();

  //Expresiones regulares para validar
  var numerico = /^[0-9]+$/;
  var texto = /^[a-zA-Z]+$/;

  //Validamos si la opción es solo texto y a su vez ingresó texto en el input 
  if (selectValor == 'alphanumeric' && texto.test(inputValor) == false)
    alert('Solo se permite texto');
  //Validamos si la opción es solo numeros y a su vez ingresó numeros en el input 
  else if (selectValor == 'numeric' && numerico.test(inputValor) == false)
    alert('Solo se permiten números');
  //Validaciones 'OK'
  else
    alert('Todo bien');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="yoqsetio" method="post" id="formulario">
  <select name="numericAlphanumeric" class="jsSelect">
    <option value="alphanumeric">Alfanumérico</option>
    <option value="numeric">Numérico</option>
  </select>
  <input type="text" name="data" class="jsInput">
  <input type="submit" value="enviar" class="btnValidation">
</form>

5
  • Hola Fernando gracias por la ayuda, pero tal vez no me explique bien pero el problema en si que tengo es que no hay un botón que valide si no el combobox tiene un evento change que según el tipo valida que se debe ingresar en el input. lo que realice funciona cuando selecciono un numérico todo bien, pero el problema es cuando intento cambiar el tipo a un alfanumérico el campo ya no me permite ingresar ningún carácter a menos que sea numérico.
    – Aizen
    Commented el 15 may. 2019 a las 15:26
  • Vale, intenta porfavor mostrar el código en tu pregunta de como haces la funcionalidad de validar el input cuando se selecciona una opción del select, para entender mejor el proceso y así ayudarte o dar ideas. Commented el 15 may. 2019 a las 17:55
  • Fernando ya subí una captura del código podrías revisarlo por favor.
    – Aizen
    Commented el 15 may. 2019 a las 18:33
  • @Erick, aún sigo intentando, mientras, se me ocurre una solución provicional, la idea es tener dos inputs, y mostrar uno u otro dependiendo la opción seleccionada, obviamente ya cada input viene con su respectiva validación y así no habría lío. Qué te parece? Commented el 16 may. 2019 a las 17:23
  • Gracias Fernando, pero ya encontré una solución. pero si usar dos input también es una buena alternativa.
    – Aizen
    Commented el 17 may. 2019 a las 18:24

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.