Compruebe si el campo de entrada está vacío usando jQuery
-
Use el método
val()para verificar si el campo de entrada dado está vacío usando jQuery -
Use el método
val()con la propiedad de longitud para verificar si el campo de entrada dado está vacío usando jQuery
Este tutorial demuestra cómo verificar si una entrada está vacía en jQuery.
Use el método val() para verificar si el campo de entrada dado está vacío usando jQuery
jQuery no proporciona un método integrado para verificar si un campo de entrada está vacío, pero podemos usar el método val() para verificar si la entrada está vacía.
El método val() se puede utilizar de dos formas en jQuery. Primero, puede obtener el valor actual de un elemento, y otro, puede establecer el valor del elemento actual.
Para verificar si la entrada está vacía o no, obtenemos su valor, y si no obtiene un valor, significa que la entrada está vacía.
Usamos la funcionalidad get del método val(), donde obtenemos el valor y verificamos si el vacío está vacío o no. Esto se puede hacer de dos formas:
if (!$('#NameField').val())- Coloca el valor de la entrada directamente en la condiciónif. Si es falso, eso significa que la entrada está vacía.if ($('#NameField').val().length === 0)- Comprueba la longitud del valor de entrada, si es cero significa que la entrada está vacía.
Probemos un ejemplo para verificar si un campo de entrada está vacío usando el método val() en la condición if:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check If Inputs are Empty using jQuery</title>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('#SubmitBtn').click(function() {
if (!$('#NameField').val()) {
alert('Pleae Enter your name! The input field is empty');
}
})
});
</script>
</head>
<body>
<div id="Main">
<label for="NameField">Please Enter your name:</label>
<input type="text" id="NameField" name="NameField">
<button id="SubmitBtn">Submit</button>
</div>
</body>
</html>
El código anterior mostrará una alerta si se presiona el botón Enviar cuando el campo de entrada Nombre está vacío. Ver la salida:
Use el método val() con la propiedad de longitud para verificar si el campo de entrada dado está vacío usando jQuery
De manera similar, podemos usar el método val() con la propiedad de longitud para verificar si el campo de entrada dado está vacío o no. Si la longitud es igual a cero, el campo está vacío.
Probemos un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Check If Input is Empty using jQuery</title>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('#SubmitBtn').click(function() {
if ($('#NameField').val().length === 0) {
alert('Pleae Enter your name! The input field is empty');
}
})
});
</script>
</head>
<body>
<div id="Main">
<label for="NameField">Please Enter your name:</label>
<input type="text" id="NameField" name="NameField">
<button id="SubmitBtn">Submit</button>
</div>
</body>
</html>
El código anterior usa la propiedad de longitud para verificar si el campo dado está vacío o no, donde obtenemos el valor de entrada mediante el método val() y luego verificamos su longitud. Ver la salida:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook