Estoy escribiendo un código para un sitio web para alertar a un usuario si algún parámetro en el envío del cuadro de texto se dejó en blanco y, por alguna razón, no funciona. Lo he intentado todo y no estoy seguro de si estoy tomando el enfoque correcto. Aquí está mi código javascript:
let assetInfo = { asset_tag_no: $(`#asset_tag_no${i}`).val(), manufacturer: $(`#manufacturer_serial_no${i}`).val(), descriptions: $(`#description${i}`).val(), costs: $(`#cost${i}`).val(), po_no: $(`#po_no${i}`).val(), department_division_head: $(`#department_division_head${i}`).val(), } $('#submit').click(function(assetInfo){ if($(assetInfo).val() == ''){ alert('Input can not be left blank'); } });Y aquí está mi HTML:
<button type="button" class="btn btn-primary" id='submit'>SUBMIT</button>¿Algun consejo?
Intente verificar los valores específicos en el objeto assetInfo en lugar del objeto en sí.
$('#submit').click(function(assetInfo){ if (assetInfo.asset_tag_no == '' || assetInfo.manufacturer == '' || assetInfo.descriptions == '' || assetInfo.costs == '' || assetInfo.po_no == '' || assetInfo.department_division_head == '') { alert('Input can not be left blank'); } }); Alternativamente, puede simplemente agregar el atributo required a los elementos de input y luego el navegador puede alertar de forma nativa al usuario cuando falta la entrada.
<input type="text" name="asset_tag_no" required/>
Cuando usa JQuery para obtener un elemento a través $('.foo') , por ejemplo, devuelve un objeto activo que está vinculado al DOM. Sin embargo, cuando llama a el.val() en un elemento JQuery, obtiene una primitiva, por lo que ya no está vinculado con el valor del DOM para ese elemento. Por lo tanto, debe ajustar su constante assetInfo para incluir solo los elementos. Luego, obtenga los valores primitivos de los elementos cuando los necesite en el detector de eventos. Aquí están sus constantes:
let assetInfo = { asset_tag_no: $(`#asset_tag_no${i}`), manufacturer: $(`#manufacturer_serial_no${i}`), descriptions: $(`#description${i}`), costs: $(`#cost${i}`), po_no: $(`#po_no${i}`), department_division_head: $(`#department_division_head${i}`), } Ahora, puede obtener una matriz de los elementos llamando a Object.values en assetInfo . Después de eso, podemos usar el método Array.prototype.every para verificar si el valor de cada elemento no está vacío. También debe eliminar el parámetro de la función de devolución de llamada porque solo puede acceder a él a través de su nombre.
$('#submit').click(function() { const allValid = Object.values(assetInfo).every((el) => el.val() != ""); if (!allValid) { alert('Input can not be left blank'); } });Si está hablando de cuadros de texto, aquí está la solución:
Entonces, en HTML, puede llamar a las funciones de Javascript durante los eventos usando parámetros. La función que puede usar se llama 'onblur', que se activa cuando un objeto en la ventana pierde el foco. Así que escribirías:
<input type="text" onblur="myFunction(this)" /> <p id="errorMessage" />Y luego necesitamos la función por razones obvias. Ahora iríamos:
const errorMessage = document.getElementById('errorMessage') function myFunction(field) { if (field === "") { errorMessage.innerText = "One or more fields were not entered."; } }Espero que esto haya ayudado.