Zenn
🦀

jQuery￤フレームワークが使えない時に入力/確認画面の問題を少しだけ解決出来るかもしれない小技

2020/10/30に公開
jQuery
初心者
tech

入力項目を確認画面で確認後、また入力画面へ戻って修正する場合に、フレームワークが使えずjQueryしか使えない場合に一応なんとかできたのでそのメモですφ('ᴗ'」)
※出来るというだけでセキュリティ的にはどうなのでしょう、、なのでそこはご了承ください🙏

画面はこのような感じで、今回は「入力画面 ⇄ 確認画面」の部分です。
入力画面 ⇄ 確認画面 → なんらかの処理

環境

・jQuery 3.4.1

バリデーションエラー時にエラーの項目までスクロールする

バリデーションエラーがあった場合、HTML側は

  1. inputタグのclassにerrorをつけることで、入力欄の色が変わる
  2. errorをつけた時にinputタグの上の「※名前は必須入力項目です」も表示されるようにする
    といった感じにしています。

そのため確認画面 → 入力画面で編集に戻ってきた場合はこのままで大丈夫ですが、最初にこの画面にきた場合に①②が表示されないようにしています（今回は省略）

<div>
  <label for=“name” class=“form-item__head”>名前</label>
  <p class=“form-item__error”>※名前は必須入力項目です</p>
  <input id=“name” type=“text” name=“name” class=“form-item__input error” data-id=“valid”>
</div>

入力チェックしたいinputタグやtextareaタグにはdata-id="valid"をつけておき、submitボタンを押したら以下をチェックします。

  1. 入力チェックしたい項目に何かしら入力されているかチェック
  2. クラスにerrorがついているかをチェックして、errorがあった場合はerrorの位置までスクロールする

💡submitボタンでは必須入力チェックしか確認していませんが、submitボタンを押す前にも各入力欄をblurでチェックしているためすでにクラスにerrorがついている場合もあります

$('#submit').on('click', function(){
  $('[data-id="valid"]').each(function(){
    if($(this).val() == ''){
      $(this).addClass('error');
      $(this).prev('p').show();
    }
  });

  if($('.error').is(':visible')){
    let position = $('.error').offset().top;
    $('html body').animate({ scrollTop: position - ($('header').height()) });
    return false;
  }
});

offset()メソッドを使用すると、ドキュメントに対する要素（具体的には、余白を除く境界ボックス）の現在の位置を取得できるようです。

セレクタを変数にしたい

変数を合体させればOKでした💡

$('#' + id)

テキストエリアに入力された改行を確認画面でも表示する

入力画面 → 確認画面に遷移したときに
・入力された内容をエスケープ処理して表示させる
・改行が入力された場合、確認画面でも改行されたまま表示する

💡まずURLエンコードされた値をデコードと、改行をかえる

let memo = param['memo'] === '' ? '' : decodeURIComponent(param['memo'].replace(/%0D%0A/g, '\n'));

💡エスケープ処理してHTMLへ表示させる

$('#memo').html($('<dummy>').html(escapeHTML(memo)).html().replace(/\n/g, '<br>'));

function escapeHTML(str){
  return str.replace(/\&/g, '&amp;')
            .replace(/\</g, '&lt;')
            .replace(/\>/g, '&gt;')
            .replace(/\"/g, '&quot;')
            .replace(/\'/g, '&#x27');
}

jQueryだとtext()で表示するのがよいとされているようなのですが、text()を使うと改行が入れられなかったのでhtml()を使っています。

URLに入力内容が表示されないようにする

こういったアドレスに入力値が入ってきてしまうのが表示されないようにということですね。
アドレスバー

postでアレコレできないので、致し方なし...と思っていたのですが、アドレスバーのURLを書き換えるを参考にしたところできました。

history.replaceState('','','/form/index.html');

?前のパスまで書けば、入力内容が表示されないようにアドレスバーが書き換えられました◎

おわりに...

できなくはないし、課題が解決するとやはり楽しいのですが、フレームワークを使えないのいろいろとしんどいなぁと多々思いました(　´ `　)

Discussion