【Java script問題集】1-8 フォームの文字数チェックをしてみよう
1-8.html
<html>
<head>
<title>1-8</title>
</head>
<body>
<div class="form_area">
<p class="form_title">フォームに入力してね！</p>
<form action="">
<div class="form_item">
<label for="" id="label-pos">（10文字まで）</label>
<input type="text" id="input-pos" data-position="0">
</div>
<p class="error_text" style="display:none;">※エラーメッセージ</p>
<button>送信</button>
</form>
</div>
</body>
1-8.js
$(function() {
$("button").click(function() {
if ($('#input-pos').val() === "") {
$('.error_text').text('未入力です').show();
return false;
}
if ($('#input-pos').val().length > 10){
$('.error_text').text('最大文字数をオーバーしてます').show();
return false;
}
alert("送信完了");
});
});
【実行結果(送信ボタン押下前)】
【実行結果(未入力の場合)】
【実行結果(文字数オーバーの場合)】
【実行結果(10文字入力で送信の場合)】
