HOWTO · jQuery
jQuery を使用して入力フィールドが空かどうかを確認する
このチュートリアルでは、jQuery で入力が空かどうかを確認する方法を示します。
このページの内容
このチュートリアルでは、jQuery で入力が空かどうかを確認する方法を示します。
val() メソッドを使用して、指定された入力フィールドが空かどうかを jQuery を使用して確認する
jQuery には、入力フィールドが空かどうかをチェックする組み込みメソッドはありませんが、val() メソッドを使用して、入力が空かどうかをチェックできます。
val() メソッドは、jQuery で 2つの方法で使用できます。 まず、要素の現在の値を取得できます。また、現在の要素の値を設定できます。
入力が空かどうかを確認するには、その値を取得します。値が取得されない場合は、入力が空であることを意味します。
val() メソッドの get 機能を使用して値を取得し、empty が空かどうかを確認します。 これには、次の 2つの方法があります。
if (!$('#NameField').val())- 入力の値を直接if条件に入れます。 false の場合、入力が空であることを意味します。if ($('#NameField').val().length === 0)- 入力値の長さをチェックします。ゼロの場合は、入力が空であることを意味します。
if 条件で val() メソッドを使用して、入力フィールドが空かどうかを確認する例を試してみましょう。
<!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>
上記のコードは、入力フィールド 名前 が空のときに送信ボタンが押された場合にアラートを表示します。 出力を参照してください。
長さプロパティで val() メソッドを使用して、指定された入力フィールドが空かどうかを jQuery を使用して確認する
同様に、長さプロパティで val() メソッドを使用して、指定された入力フィールドが空かどうかを確認できます。 長さがゼロの場合、フィールドは空です。
例を試してみましょう：
<!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>
上記のコードは、長さプロパティを使用して、指定されたフィールドが空かどうかを確認します。ここでは、val() メソッドによって入力値を取得し、その長さを確認します。 出力を参照してください。
