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.