jqueryui.com/tabs/#のように、タブ付きインデックスの同じページに 2 つのフォームがあります。
私はjsファイルを含めました:
jquery.validate.js、追加のメソッド.js、jquery.js
最初のタブのフォーム:
<form action="#" method="post" accept-charset="utf-8" name="org" id="org" autocomplete="off">
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td> <label>Name: </label></td>
<td><input type="text" name="head" value="" id="head" class="required" /></td>
</tr>
<tr>
<td><label></label></td>
<td><input type="submit" name="Submit" value="Add" onclick="javascript:addForm();" /></td>
</tr>
</table>
</form>
2 番目の TAB のフォーム:
<form action="" method="post" accept-charset="utf-8" name="orgEdit" id="orgEdit" autocomplete="off">
<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td><label>Head: </label></td>
<td><input type="text" name="editHead" value="" id="editHead" class="required" /></td>
</tr>
<tr>
<td><label></label></td>
<td><input type="submit" name="Submit" value="Update" onclick="javascript:editForm();" /></td>
</tr>
</table>
</form>
これら2つのフォームの送信ボタンをクリックしたときの検証部分は次のとおりです。
<script>
function addForm() {
$("#org").validate({
rules: {
head: {
required:true,
letterswithbasicpunc:true
},
},
messages: {
head: {
required:" Please enter head name.",
letterswithbasicpunc:" Please enter only characters."
},
},
submitHandler: function(form) {
$.post("url",$("#org").serialize(),function(data){
if(data != 'E') {
alert("Data Inserted Successfully.");
location.reload();
} else
alert("Failed.");
});
}
});
}
function editForm() {
$("#orgEdit").validate({
rules: {
editHead: {
required:true,
letterswithbasicpunc:true
},
},
messages: {
editHead: {
required:" Please enter head name.",
letterswithbasicpunc:" Please enter only characters."
},
},
submitHandler: function(form) {
$.post("url",$("#orgEdit").serialize(),function(data){
if(data != 'E') {
alert("Data Inserted Successfully.");
location.reload();
} else
alert("Failed.");
});
}
});
}
</script>
jquery 検証は、データの追加中に正常に機能していますが、編集フォームでは失敗します。これについて私を助けてください。