私はjqueryを初めて使用し、jqueryの基本を学び始めます。登録フォーム用のjqueryのスクリプトを作成します。片方または両方のフィールドが空のフォームを送信している間は正常に機能しますが、空のフィールドに再度入力すると、同じエラーメッセージが表示され、リロードメッセージの表示が停止します。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style>
c { color:red; margin:4px; }
b { color:blue; }
</style>
<script src="jquery-latest.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<h1>Registration Form:</h1>
<form id="form1">
<div>First Name<input type="text" name="fname" id="fname"><span></span></div>
<div>Last Name<input type="text" name="lname" id="lname"><span></span></div>
<div><input type="submit" value="submit" ></div>
</form>
<script>
$(document).ready(function(){
$("#form1").submit(function(){
var $spans = $("span");
if ($('#fname').val()=="") {
$spans.eq(0).html("<c>Please enter your Firstname</c>");
}
if ($('#lname').val()==""){
$spans.eq(1).html("<c>Please enter your Lastname</c>");
}return false;
});
});
</script>