我正在尝试验证此处的表单。
<form action="action.php" method="post" id="bandForm">
<div class="form-group">
<br />
<label for="bandName" class="control-label">Band Name</label>
<input type="text" class="form-control" name="bandName" id="bandName"><br /><br />
<label for="genre">Genre</label>
<select name="genre" id="genre">
<option value="Pop">Pop</option>
<option value="Rock">Rock</option>
<option value="Folk">Folk</option>
<option value="Metal">Heavy Metal</option>
</select><br /><br />
<label for="video">Enter the URL for one of your youTube videos</label>
<input type="text" class="form-control" name="video" id="video"><br />
<label for="bio">Biography</label>
<textarea rows="5" columns="4" class="form-control" name="bio" id="bio"></textarea>
</fieldset><br />
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
</form>
我正在尝试做的是,如果任何字段为空,则表单不会发送,并显示错误消息。当然,如果所有内容都已填写,那么我希望表单提交。这是JQuery:
$(document).ready(function(){
$("#bandForm").submit(function(e){
var errorMessage="";
if($('#bandName').val() == ''){
errorMessage="<br />Please enter a band name";
}
if($('#video').val() == ''){
errorMessage=errorMessage+"<br />Please enter the URL of one of your band's YouTube videos";
}
if($('#bio').val() == ''){
errorMessage=errorMessage+"<br />Please enter a band biography";
}
if (!errorMessage=="") {
$("#error").html(errorMessage);
e.preventDefault();
}
});
});
无论我做什么,表格似乎都会提交。任何帮助将不胜感激