Tengo el siguiente código html y javascript para la validación en los campos de entrada, esto funcionaba con el campo de entrada único para el nombre, pero como traté de extender mi código agregando un nuevo campo de entrada para el apellido, ahora la validación del formulario ha dejado de funcionar. como sigue:
function myFunction() { let x = document.getElementsByName("first_name").[0]value; let y = document.getElementsByName("last_name")[0].value; let text; text = ""; if (x == '' || x == null) { text = "Input not valid"; } document.getElementById("first_name_errors").innerHTML = text; } if (y == '' || y == null) { text = "Input not valid"; } document.getElementById("last_name_errors").innerHTML = text; } document.addEventListener('invalid', (function () { return function (e) { e.preventDefault(); document.getElementsByName("first_name").focus(); document.getElementsByName("last_name").focus(); }; })(), true); </head> <body> <input type="text" name="first_name" placeholder="first name" name class="input_fields" required> <div class="error-message" id="first_name_errors"></div> <input class="save_btn" type="submit" value="Save" name="save_fname" onclick="myFunction()"> <br><br> <input type="text" name="last_name" placeholder="last name" name class="input_fields" required> <div class="error-message" id="last_name_errors"></div> <input class="save_btn" type="submit" value="Save" name="save_lname" onclick="myFunction()">¿Cómo puedo hacer que esto vuelva a funcionar con el apellido del campo de entrada adicional agregado? Gracias por adelantado
hay muchos errores aquí. puede encontrarlos por su cuenta depurando su console.log
let x = document.getElementsByName("first_name").[0]value;}name vacíos en sus entradasarreglándolo a ciegas sería algo como:
let firstName = document.getElementsByName('first_name')[0]; let lastName = document.getElementsByName('last_name')[0]; function checkValid() { let x = firstName.value; let y = lastName.value; let text; text = ''; if (x == '' || x == null) { text = 'Input not valid'; } document.getElementById('first_name_errors').innerHTML = text; if (y == '' || y == null) { text = 'Input not valid'; } document.getElementById('last_name_errors').innerHTML = text; } firstName.addEventListener('invalid', function () { firstName.focus(); }); lastName.addEventListener('invalid', function () { lastName.focus(); }); <input type="text" name="first_name" placeholder="first name" class="input_fields" required> <div class="error-message" id="first_name_errors"></div> <input class="save_btn" type="submit" value="Save" name="save_fname" onclick="checkValid()"> <br><br> <input type="text" name="last_name" placeholder="last name" class="input_fields" required> <div class="error-message" id="last_name_errors"></div> <input class="save_btn" type="submit" value="Save" name="save_lname" onclick="checkValid()">