Tengo un formulario con un campo de entrada para el nombre de usuario para verificar si el campo está vacío y para verificar si lo que el usuario ingresó existe en una lista.
Esta mitad funciona como en los mensajes que aparecen cuando no son válidos, sin embargo, el formulario aún se envía si el usuario ingresa un nombre que existe en la lista, mientras que el formulario no se envía cuando el campo está en blanco (pero esto se debe a que la etiqueta de entrada requerida está presente ).
Además si el usuario ingresa un nombre que existe en la lista pero con mayúsculas y minúsculas diferentes no aparece el mensaje 'El nombre ya existe' ya que no coincide con las mayúsculas y minúsculas del nombre en la lista.
Por favor vea mi código abajo:
<script> function usernameFunction() { let x = document.getElementsByName("username")[0].value; let listNames = ["john", "sid", "paul", "jim"]; let text; text = ""; if (x === '' || x == null) { text = "Username cannot be blank"; } for (let i = 0; i < listNames.length; i++) { if (listNames[i] === x) { text = ('The name already exists') } } document.getElementById("username_errors").innerHTML = text; } document.addEventListener('invalid', (function () { return function (e) { e.preventDefault(); document.getElementsByName("username").focus(); }; })(), true); </script> <form method="POST" action=""> <input type="text" name="username" placeholder="username" name class="input_fields" required> <div class="error-message" id="username_errors"></div> <input class="save_btn" type="submit" value="Save" name="save_username" onclick="usernameFunction()"> </form>¿Cómo puedo adaptar mi código para detener el envío del formulario cuando el nombre existe en la lista e ignorar el caso? - por ejemplo - john está en la lista si el usuario ingresa a John, me gustaría que el mensaje 'El nombre ya existe' siga apareciendo y no se envíe.
Gracias por adelantado
Esta sería la línea para ti:
if ( listNames.includes(x.toLowerCase()) ) { return false; } Comprueba si el valor John está incluido en la matriz de nombres. Y la función de cadena toLowerCase() transforma el nombre en minúsculas.
function usernameFunction(e) { e.preventDefault(); let text = ''; let x = document.getElementsByName("username")[0].value; let listNames = ["john", "sid", "paul", "jim"]; if ( listNames.includes(x.toLowerCase()) ) { text = x + ' allready taken.'; } if (x === '' || x == null) { text = "Username cannot be blank"; } if (text.length > 0) { document.getElementById("username_errors").innerHTML = text; return false; } // trigger Submit programmatically document.getElementById("myForm").submit(); console.log('trigger submit') } document.addEventListener('invalid', (function () { return function (e) { e.preventDefault(); document.getElementsByName("username").focus(); }; })(), true); <form method="POST" id="myForm"> <input type="text" name="username" value="John" placeholder="username" name class="input_fields" required> <div class="error-message" id="username_errors"></div> <button class="save_btn" onclick="usernameFunction(event)">SUBMIT</button> </form>Puede usar toUpperCase() para esto.
if (listNames[i].toUpperCase() === x.toUpperCase()) { text = ('The name already exists') }