Überprüfen Sie mit jQuery, ob das Eingabefeld leer ist

Sheeraz Gul 15 Februar 2024
  1. Verwenden Sie die Methode val(), um mit jQuery zu prüfen, ob das angegebene Eingabefeld leer ist
  2. Verwenden Sie die val()-Methode mit der Length-Eigenschaft, um mit jQuery zu prüfen, ob das angegebene Eingabefeld leer ist
Überprüfen Sie mit jQuery, ob das Eingabefeld leer ist

Dieses Tutorial zeigt, wie Sie prüfen, ob eine Eingabe in jQuery leer ist.

Verwenden Sie die Methode val(), um mit jQuery zu prüfen, ob das angegebene Eingabefeld leer ist

jQuery bietet keine eingebaute Methode, um zu prüfen, ob ein Eingabefeld leer ist, aber wir können die Methode val() verwenden, um zu prüfen, ob die Eingabe leer ist.

Die Methode val() kann in jQuery auf zwei Arten verwendet werden. Erstens kann es den aktuellen Wert eines Elements abrufen, und zweitens kann es den Wert des aktuellen Elements festlegen.

Um zu überprüfen, ob die Eingabe leer ist oder nicht, erhalten wir ihren Wert, und wenn sie keinen Wert erhält, bedeutet dies, dass die Eingabe leer ist.

Wir verwenden die Get-Funktionalität der val()-Methode, wo wir den Wert bekommen und prüfen, ob das Leerzeichen leer ist oder nicht. Dies kann auf zwei Arten erfolgen:

  1. if (!$('#NameField').val()) - Setzen Sie den Wert der Eingabe direkt in die if-Bedingung. Wenn es falsch ist, bedeutet dies, dass die Eingabe leer ist.
  2. if ($('#NameField').val().length === 0) - Überprüfen Sie die Länge des Eingabewerts, wenn es Null ist, bedeutet dies, dass die Eingabe leer ist.

Versuchen wir ein Beispiel, um zu überprüfen, ob ein Eingabefeld leer ist, indem wir die Methode val() in der Bedingung if verwenden:

<!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>

Der obige Code zeigt eine Warnung an, wenn der Submit-Button gedrückt wird, während das Eingabefeld Name leer ist. Siehe die Ausgabe:

jQuery Leeres Eingabefeld prüfen

Verwenden Sie die val()-Methode mit der Length-Eigenschaft, um mit jQuery zu prüfen, ob das angegebene Eingabefeld leer ist

In ähnlicher Weise können wir die Methode val() mit der Eigenschaft length verwenden, um zu prüfen, ob das angegebene Eingabefeld leer ist oder nicht. Wenn die Länge gleich Null ist, ist das Feld leer.

Versuchen wir es an einem Beispiel:

<!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>

Der obige Code verwendet die Eigenschaft length, um zu überprüfen, ob das angegebene Feld leer ist oder nicht, wobei wir den Eingabewert durch die Methode val() erhalten und dann seine Länge überprüfen. Siehe die Ausgabe:

jQuery Leeres Eingabefeld nach Länge prüfen

Sheeraz Gul avatar Sheeraz Gul avatar

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

Verwandter Artikel - jQuery Input