我正在尝试使用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>
答案 0 :(得分：0)
这样的事情（使用AJAX）：
$('#button').click(function(){
//encodeURIComponent encode data proprely... and GET val() aka VALUE!!!
var name = encodeURIComponent($('#name').val());
var email = encodeURIComponent($('#email').val());
var message = encodeURIComponent($('#message').val());
//check is mail VALID
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
//get data inside $_POST['name'] (PHP) and inside +name+ (form id)
var data = 'name=' + name + '&email=' + email + '&message=' + message;
//alert(data);
//if name is empty
if($('#name').val() == 0){
$('.info').hide().fadeIn(1000).html('<p style="font-weight:bold;text-align:center;font-size:20px;">Please enter your name!</p>');
}
//if name is less than three characters
else if(name.length < 2){
$('.info').hide().fadeIn(1000).html('<p style="font-weight:bold;text-align:center;font-size:20px;">Name must be longer than two letters!</p>');
}
//if email is empty
else if ($('#email').val() == 0){
$('.info').hide().fadeIn(1000).html('<p style="font-weight:bold;text-align:center;font-size:20px;">Please enter Email!</p>');
}
//if mail adress is NOT valid
else if(reg.test(email)==false){
//alert('please enter valid mail!');
$('.info').hide().fadeIn(1000).hide().fadeIn(1000).html('<p style="font-weight:bold;text-align:center;font-size:20px;">Please enter VALID Mail!</p>');
}
//if mail adress IS VALID
if(reg.test($('#email').val()) && $('#name').val()!=''){
$('.info').hide().fadeIn(1000).html('<p class="thx" style="font-weight:bold;text-align:center;font-size:20px;">THX for your mail!</p><span class="success" style="font-weight:bold;text-align:center;font-size:20px;display:none;margin:0 auto">Mail sent successfuly!!</span>');
$.ajax({
type:"POST", //php method
url:'process.php',//where to send data...
cache:'false',//IE FIX
data: data, //what will data contain (no SHIT Sherloc...)
//check is data sent successfuly to process.php
//success:function(response){
//alert(response)
//}
success: function(){ //on success do something...
$('.success').delay(2000).fadeIn(1000);
//alert('THX for your mail!');
}).error(function(){ //if sucess FAILS!!
alert('An error occured!!');
$('.thx').hide();
});
} //end if statment for VALID mail
//return false prevent Redirection
return false;
});