jquery プラグインでは、直接検証できるはずですが、解決策が見つかりません。
http://jqueryvalidation.org/documentationを確認しましたが、答えが見つかりませんでした。
フィールドを空にする場合は、「必須」と表示する必要があります。しかし、私の場合、テキストを入力し、別のフィールドに移動して元のフィールドに戻る必要があり、そこに残っているテキストを削除すると「必須」になります。
これはデフォルトですか、それともこの動作を変更できますか?
リンク: http://www.volunteeringnews.com/組織の下で > 提出する
これは私のコードです：
<?php include("osb.php");?>
<script type = "text/javascript">
$(function(){
$('#submit').click(function(){
$.ajax({
url: 'osb.php',
type: 'POST',
data: $('#form1').serialize(),
success: function(result){
$('#response').remove();
$('#container').append('<p id = "response">' + result + '</p>');
$('#loading').fadeOut(500);
}
});
});
});
</script>
<h1>Fill in your information below</h1 ><br><br>
<a id="nw" href="#">Need help?</a>
<form action='osb.php' method='post' id="form1">
<div id = "container"> <br>
<h3>Basic Information</h3><br><br>
<label><strong>Name <font color="red">*</font> </strong></label> <input type='text' id="name" name='name' /><br><br>
<label><strong>Continent <font color="red">*</font> </strong></label> <select id="continent" name="continent"><option>Africa</option><option>America</option> <option>Asia</option><option>Australia</option><option>Europe</option></select><br><br>
<label><strong>Country <font color="red">*</font> </strong></label> <input type='text' id="country" name='country' /><br><br>
<label><strong>Website </strong></label> <input type='text' id="website" name='website' /><br><br>
<label><strong>E-mail <font color="red">*</font> </strong></label> <input type='text' id="email" name='email' /><br><br><br>
<h3>Organisation details</h3><br><br>
<label><strong>Organisation <font color="red">*</font> </strong></label> <input type='text' id="nameorg" name='nameorg' /><br><br>
<label><strong>Category </strong></label> <input type='text' id="category" name='category' /><br><br>
<label><strong>Price per week <font color="red">*</font> </strong></label> <input type='text' id="price" name='price' />
<select id ="currency" name="currency" > <option> EUR </option> <option> DOL </option> <option> GBP </option></select><br><br>
<label><strong>Description <font color="red">*</font> </strong></label> <textarea id="description" rows="5" cols="40" placeholder="Describe your organisation" name='description'/></textarea><br><br>
<label><strong>Wanted <font color="red">*</font> </strong></label> <textarea id="wanted" rows="5" cols="40" placeholder="Describe what kind of volunteer is welcome" name='wanted'/></textarea><br><br>
<label><strong>Expectation <font color="red">*</font> </strong></label> <textarea id="expectation" rows="5" cols="40" placeholder="Describe what a volunteer can expect" name='expectation'/></textarea><br><br>
<label><strong>Extra </strong></label> <textarea id="extra" rows="5" cols="40" placeholder="Extra details" name='extra'/></textarea><br><br>
<input type='hidden' name='action' value='create' />
<input type='button' value='Submit' id="submit"/>
<input type="reset" value="Reset" class="reset-org">
<a href='index.php'>Back to index</a>
</div>
</form>
<script>
$(document).ready(function () {
debug:true;
$("#form1").validate({
rules: {
'name': {required: true},
'country': {required: true,},
'email': {required: true, email: true},
'website': {url: true},
'nameorg': {required: true,},
'price': {required: true, number: true},
'description': {required: true,},
'wanted': {required: true,},
'expectation': {required: true}
},
messages: {
'name': "Required",
},
submitHandler: function (form) {
alert('is good');
return false;
}
});
});
</script>
<script src="js/navigation.js"></script>