フォームの既存のデータと送信されたデータを比較する汎用フォーム検証スクリプトを作成したいと考えています。送信されたデータがページの読み込み時に存在するものと異ならない場合、検証は失敗します。
問題は、複数のフォームがあり、単一のフォームについて既存のデータを検証したい場合です。これは、動作にかなり近づいているように見えますが、まだ動作していない JSFiddle です: http://jsfiddle.net/aMUNh/33/
この JSFiddle の問題は、 JSON オブジェクト$.each(function)
の設定と設定だと思います。existingData
HTML:
<form id="form1">
<input name='form1name1' value='form1value1'>
<input name='form1name2' value='form1value2'>
<input id="1" type="submit" value='submit'>
</form>
<form id="form2">
<input name='form2name1' value='form2value1'>
<input name='form2name2' value='form2value2'>
<input id="2" type="submit" value='submit'>
</form>
JS:
var existingData={}; //declaring the object to be cached
$("form").each(function(index){
existingData.id+=this.id;
existingData.id.data+=$(this).serialize();
});
var id='form1';
document.write('existingData:'+existingData.id.data);
$('input [type=submit]').click(function(){
var id='form'+this.id;
var submittedData=$(this.form).serialize();
if(submittedData==existingData.id.data){
console.log('nothing changed');
}
else console.log('this form changed');
});