jqueryを使用してフォームバリデーションを作成しようとしています。基本的に、私が望むのは、ユーザーが必須フィールドを空のままにしておくと、そのフィールドが空であることをユーザーに知らせるメッセージがその隣に表示されることです。私がこれまでに行ったことは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>formulier</title>
<style type="text/css">
form span{
color:red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).on("ready", loaded);
function loaded(){
console.log("loaded");
$('#naam').blur(validate);
$('#accept').change(checkbox);
}
function validate()
{
console.log("validate");
var lengte= $("#naamveld #postcodeveld #huisnummerveld").val();
console.log(lengte);
if ($(this) !== '')
{
$(".foutmelding1").text("Required")
}
else{
$(".foutmelding1").text("Go on")
}
}
function checkbox(){
if($('input[type=textbox]').is(':checked')){
console.log('checked');
$('button').removeAttr("disabled");
}
else{
console.log('not checked');
$('button').attr("disabled", "disabled");
}
}
</script>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>
NAW
</legend>
<p>
<label for="naamveld">Naam: *</label>
<label for="dhr">
<input type="radio" name="gender" value="m" id="dhr" />
dhr. </label>
<label for="mevr">
<input type="radio" name="gender" value="f" id="mevr" />
mevr. </label>
<input type="text" name="name" id="naamveld" class="verplicht" />
<span class="foutmelding"> </span>
</p>
<p>
<label for="straatveld">Straat:</label>
<input type="text" name="street" id="straatveld" />
<label for="straatveld">Huisnummer: *</label>
<input type="text" name="huisnummer" id="huisnummerveld" class="verplicht" />
<span class="foutmelding"> </span>
</p>
<p>
<label for="postcodeveld">Postcode: * </label>
<input type="text" name="zip" class="verplicht" id="postcodeveld" />
<label for="stadveld">Stad:</label>
<input type="text" name="city" class="verplicht" id="stadveld" />
<span class="foutmelding"> </span>
</p>
</fieldset>
<fieldset>
<legend>
Contact
</legend>
<p>
<label for="emailveld">Email:
<input type="text" name="email" id="emailveld" />
</label>
</p>
<p>
<label for="telefoonveld">Telefoon:
<input type="text" name="phone" id="telefoonveld" />
</label>
</p>
<p>
<button name="action" value="send" type="submit" >
Verstuur
</button>
</p>
</fieldset>
</form>
</body>