jquery.validationEngine.jsで追加したclassが確認画面から戻ると無くなる

jquery.validationEngine.jsで下記のように入力結果によってクラスを追加して、inputの背景色等を変更したり、submitのdisabledをオフにしたりしているのですが、確認画面に行ってから戻るボタンを押すとクラスがなくなっています。
クッキーやセッションでデータ渡すしか無いのでしょうか。
やり方があれば教えていただければ幸いです。
よろしくお願いいたします。

#JavaScript部分

<script type="text/javascript" src="/js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="/js/languages/jquery.validationEngine-ja.js"></script>
<script>
jQuery(document).ready(function(){
    jQuery("#contact").validationEngine('attach', {
        focusFirstField : false,
        addFailureCssClassToField: "inputError",
        addSuccessCssClassToField: "inputOk",
    });
});
</script>

m.ts10806

2018/07/21 07:02

「戻るボタンはそもそも動作保証しない」というのはお考えではないですか？history.back後の動作を保証するのは実装の労力の割りにあまりメリットが見込めません。

igaiga

2018/07/21 07:11

ご指摘のとおりかとか思いますが、submitがdisabledでロックされた状態で戻るのでどうにかしたいなと思います。EFO的なものにできるだけ近づけたいのでdisabledもなるべく外したくないです。

行動規範の内容に同意します

回答1件

ベストアンサー

History APIを使用するのはどうでしょうか。

js
1jQuery(document).ready(function(){
2    jQuery("#contact").validationEngine('attach', {
3        focusFirstField : false,
4        addFailureCssClassToField: "inputError",
5        addSuccessCssClassToField: "inputOk",
6    });
7    // ここから追加
8    if (!history.replaceState || history.state === 'visited') {
9        jQuery("#contact").validationEngine('validate');
10    } else {
11        history.replaceState('visited', location.href);
12    }
13    // ここまで追加
14});

History APIは主に、ページ遷移せずにURLを書き換えるときに使われることが多いですが、この例ではhistory.replaceStateメソッドをhistory.stateを書き換えるためだけに使用しています。
history.stateはブラウザの履歴操作でページ遷移しても中身は保持されているので、条件分岐して処理を記述することができます。

投稿2018/07/21 17:58

編集2018/07/22 12:45