1

Estoy creando un Form para uso de escaneo. Lo que quiero hacer es que, al momento de que un usuario escanee, este campo se valide para que le haga saber si escaneo bien o no el campo. Les explico con el codigo. Soy un poco nuevo con esto de JS y validar campos. Y no logro hacer que se valide el campo.

Aquí tengo el codigo del formulario, el cual puede ser desplegado hasta 40 filas para capturar/escanear. Como pueden observar, la validacion la tengo en un input.

<form method="post" name="crear-in" id="crear_in" action="modelo-in.php" onsubmit="return validar();">

                    <!-- Los datos se pueden desplegar hasta 40 veces -->
                      <?php
                      for ($i = 1; $i <= $n; $i++) { ?>
                        <tr class="fila-fija">

                          <input type="hidden" style="width : 140px;" id="customer<?php echo ($i); ?>" required name="customer[]" placeholder="customer" />
                          <input type="hidden" id="folio<?php echo ($i); ?>" name="folio[]" value="<?php echo $f; ?>">
                          <td><input type="text" style="width : 90px;" id="skmx_pn<?php echo ($i); ?>" required name="skmx_pn[]" placeholder="SKMX PN" onchange="consult();" /></td>
                          <td><input type="text" style="width : 180px;" id="description<?php echo ($i); ?>" required name="description[]" placeholder="Description" readonly /></td>
                          <td><input type="text" style="width : 90px;" id="customer_pn<?php echo ($i); ?>" required name="customer_pn[]" placeholder="Customer PN" readonly /></td>
                          <td><input onkeypress='return validarSO(event)' class="so" type="text" style="width : 120px;" id="shop_order<?php echo ($i); ?>" required name="shop_order[]" placeholder="# Shop Order" /></td>
                          <td><input type="text" style="width : 70px;" id="po<?php echo ($i); ?>" required name="po[]" placeholder="# P.O." /></td>
                          <td><input type="text" style="width : 100px;" id="lote<?php echo ($i); ?>" required name="lote[]" placeholder="Lote" /></td>
                          <td><input class="quantity" type="text" style="width : 60px;" id="quantity<?php echo ($i); ?>" required name="quantity[]" placeholder="Quantity" /></td>
                          <td><input type="text" style="width : 60px;" id="location<?php echo ($i); ?>" required name="location[]" placeholder="Location" value="Pasillo" readonly /></td>
                          <td><input type="text" style="width : 60px;" id="incoming<?php echo ($i); ?>" required name="incoming[]" placeholder="" readonly /></td>

                        </tr>
                      <?php } ?>

                      <!-- </table> -->
                      <div class="box-footer">
                        <br>
                        <input type="hidden" name="registro" value="nuevo">
                        <button type="submit" id="btn-in-out" class="btn btn-primary btn-block btn-flat">Crear</button>

                      </div>

                    </form>

Estuve investigando en internet sobre Regular expressions y arme el siguiente codigo de JS. Cabe resaltar que el formato que quiero es WK00-0000.

NOTAS

Estoy usando getElementsByClassName por que estos campos pueden ser desplegados hasta 40 veces, aunque no estoy seguro si es una buena forma de hacerlo. Además de que la mayoria de las veces este sera escaneado con la configuracion del enter del escaner.


function validarSO(event) {
                    var so = document.getElementsByClassName("so").value;
                    var exp = /^ [W]{1}[K]{1} \d{2} - \d {4} $/

                    if (exp.test(so)) {
                      alert("Se valido el SK");
                    } else {
                      alert("No se valido");
                      return false;
                    }
                  }

Estoy abierto a sugerencias si en algún lado estoy haciendo algo mal. Gracias.

1 respuesta 1

3

Te hago las siguientes recomendaciones:

  1. Ten cuidado con las expresiones regulares y los espacios que hay en ellas, si quieres un evaluar un formato como WK00-0000 entonces la expresión debería de ser /^[W]{1}[K]{1}\d{2}-\d{4}$/ y no la que estás usando que incluye espacios extra.
  2. Pasa this a la función desde el evento para poder acceder al elemento que necesita validarse, en este caso acceder al atributo value del mismo para hacer la validación.
  3. Para no interrumpir al usuario mientras escribe en el elemento de tipo input te recomiendo que busques otro evento, yo en el ejemplo que te brindo como solución utilizo onchange.

Tomando en cuenta esto, tú código quedaría así:

function validarSO(e) {
  var so = e.value;
  console.log(so);
  var exp = /^[W]{1}[K]{1}\d{2}-\d{4}$/

  if (exp.test(so)) {
    alert("Se valido el SK");
  } else {
    alert("No se valido");
    e.value="";
    return false;
  }
}
<form method="post" name="crear-in" id="crear_in" action="modelo-in.php" onsubmit="return validar();">

  <!-- Los datos se pueden desplegar hasta 40 veces -->
  <?php
                      for ($i = 1; $i <= $n; $i++) { ?>
    <tr class="fila-fija">

      <input type="hidden" style="width : 140px;" id="customer<?php echo ($i); ?>" required name="customer[]" placeholder="customer" />
      <input type="hidden" id="folio<?php echo ($i); ?>" name="folio[]" value="<?php echo $f; ?>">
      <td><input type="text" style="width : 90px;" id="skmx_pn<?php echo ($i); ?>" required name="skmx_pn[]" placeholder="SKMX PN" onchange="consult();" /></td>
      <td><input type="text" style="width : 180px;" id="description<?php echo ($i); ?>" required name="description[]" placeholder="Description" readonly /></td>
      <td><input type="text" style="width : 90px;" id="customer_pn<?php echo ($i); ?>" required name="customer_pn[]" placeholder="Customer PN" readonly /></td>
      <td><input onchange='return validarSO(this)' class="so" type="text" style="width : 120px;" id="shop_order<?php echo ($i); ?>" required name="shop_order[]" placeholder="# Shop Order" /></td>
      <td><input type="text" style="width : 70px;" id="po<?php echo ($i); ?>" required name="po[]" placeholder="# P.O." /></td>
      <td><input type="text" style="width : 100px;" id="lote<?php echo ($i); ?>" required name="lote[]" placeholder="Lote" /></td>
      <td><input class="quantity" type="text" style="width : 60px;" id="quantity<?php echo ($i); ?>" required name="quantity[]" placeholder="Quantity" /></td>
      <td><input type="text" style="width : 60px;" id="location<?php echo ($i); ?>" required name="location[]" placeholder="Location" value="Pasillo" readonly /></td>
      <td><input type="text" style="width : 60px;" id="incoming<?php echo ($i); ?>" required name="incoming[]" placeholder="" readonly /></td>

    </tr>
    <?php } ?>

    <!-- </table> -->
    <div class="box-footer">
      <br>
      <input type="hidden" name="registro" value="nuevo">
      <button type="submit" id="btn-in-out" class="btn btn-primary btn-block btn-flat">Crear</button>

    </div>

</form>

Suerte programando! Espero que esto te sea de mucha ayuda.

5
  • Andaba probandolo y si funciona, el detalle es que si se escanea un valor que no cumple con la validacion, me da la alerta alert("No se valido"); , sin embargo, aun así me pone los valores en el input. No se si entre aquí pero queria que si no era correcto el valor escaneado, simplemente me mandara la alerta y que no me ingresara nada en el Input. Commented el 16 mar. 2021 a las 18:45
  • Es que el input adquiere el valor antes de que se haga la validación. A ver si te entiendo... ¿Lo que quieres es que si la validación falla que se borren los datos del input?
    – FranAcuna
    Commented el 16 mar. 2021 a las 18:47
  • Creo que tienes razon, y si, si no es correcta la validacion, que no se muestre nada en el input o como tu lo dices, que se borre. Commented el 16 mar. 2021 a las 18:51
  • Ya te entiendo, en este caso nada más cambias el value del input por medio de JS, te voy a actualizar la respuesta para incluir este comportamiento.
    – FranAcuna
    Commented el 16 mar. 2021 a las 18:51
  • Perfecto, funciona a la perfeccion, agradezco mucho tu tiempo y ayuda. Commented el 16 mar. 2021 a las 19:08

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.