validationEngineでAjaxを利用して独自のバリデーションを追加したところ送信時に２回処理が走ってしまう
解決したいこと
validationEngineでAjaxを利用して独自のバリデーションを追加したところ、Ajaxを経由するバリデーションをつけたフォームだけ送信時に２回処理が走ってしまいます。
２回ボタンが押されるわけではなく、フォームで設定したaction=""の飛び先の処理が２回実行されてしまうような状況です。
どなたかお知恵を貸していただけますと幸いです。
下記、簡易化したコードです
発生している問題・エラー
<form method="post" class="validation-form" action="create_topic.php">
<label>相談タイトル</label>
<input id="topic-title" name="topic-title" type="text" class="validate[required,ajax[ngword]]">
<label>相談内容</label>
<textarea id="topic-content" name="topic-content" class="validate[required,ajax[ngword]]"></textarea>
<button type="submit">この内容で相談する</button>
</form>
<script type="text/javascript">
$(function(){
$(".validation-form").validationEngine('attach', {
promptPosition:"bottomLeft",
ajaxFormValidationMethod: 'post',
focusFirstField: false,
scroll: false,
allrules: {
ngword: {
url: 'validation.php',
alertText: '* NGワードが含まれています',
alertTextOk: '',
alertTextLoad: ''
}
},
});
});
</script>
上記のうち、
・validation.phpはajaxの飛び先でNGワードチェックをして成否を返すコード
・create_topic.phpはフォームの送信データを受け取り投稿記事を作成するコード
です。
現状、リアルタイムでも送信ボタンをクリックしてもバリデーションチェックは正常に動作しますが、チェック後に送信された際にcreate_topic.phpの処理が２回実行されてしまいます。
ajaxのバリデーションを除いて、
<script type="text/javascript">
$(function(){
$(".validation-form").validationEngine('attach', {
promptPosition:"bottomLeft",
});
});
</script>
とすると、１回しか実行されないのでajaxのバリデーションが何か悪さをしていることまでは分かったのですが、、、
validation.phpでは単純な文字列比較のみしかおこなっておらず、送信をもう一度おこなうような処理は加えていないので、何を直せば良いのか行き詰っています。
0 likes
