フォームバリテーション

おすすめフレームワーク　-> v8n

めも

1. HTML5におけるinput要素のpattern属性、type属性

textareaにはrequired属性はあるが、pattern属性はない！



// pattern="^[a-zA-Z0-9-_]+$" title="半角英数字とハイフン(-)、アンダーライン(_)で入力してください。"
// pattern="^[0-9A-Za-z]+$" title="半角英数字で入力して下さい。"
// pattern="[A-Za-z]{8}" title="半角英字８文字で入力して下さい。"
// pattern="\d{3}-\d{4}" title="郵便番号は、「123-4567」のように、「３桁の数字、ハイフン（‐）、４桁の数字」の順で入力して下さい。"
// pattern="\d{3}-?\d{4}" // ハイフン（‐）あってもなくても
// pattern="\d{2,4}-?\d{3,4}-?\d{3,4}" 電話：数字２～３文字＋ハイフン（あってもなくても）＋数字３～４文字＋ハイフン（あってもなくても）＋数字３～４文字
// pattern="(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{6,}" title="半角英大文字・半角英小文字・半角数字いれずれも必ず含む6文字以上"
// pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="メールアドレス"
// pattern="[ァ-ヴー\s　]+" title="カタカナ"
// maxlength="20"
// required 　→　エラーメッセージは、複数エラーの場合は、最初の項目だけ。

CSSで取得可能な状態


//css
//エラーの場合。入力前から？（firefox）
input:invalid {
  border: 2px solid red;
  background-color: #ffdddd;
}
/* inputのすぐ隣に配置するメッセージ要素 */
.error-message {
  font-size: 12px;
  color: #ff7676;
  display: none; /* 非表示に */
}
/* :invalid時だけ隣の要素を表示 */
input:invalid + .error-message  {
  display: block;
}
//フォーカス時の装飾
input:invalid:focus {
  border: solid 3px red;
  outline: 0;
}
//フォーカスがあたってない時の装飾
input:invalid:not(:focus) {
  border: solid 1px pink;
  outline: 0;
}

値の取得：選択状態の確認

セレクトボックス

アイスクリームの味:


var selector = document.getElementById( "target" ) ;
if (selector.selected ) {
	// 選択状態である
} else {
	// 選択状態ではない
}
//選択状態の変化で
selector.addEventListener('change', (event) => {
  console.log(event.target.value);
});

//selectbox
const selectElement = document.querySelector('.ice-cream');
selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  if(event.target.value != '') result.textContent = `You like ${event.target.value}`;
  if(event.target.value == '') result.textContent = '選択されてません';
});

//selectには、選択解除がないので、未選択: value = '' を作ってそこで判断

ラジオボタン

性別：男女


var radios = document.querySelectorAll('input[name=sex2]');
const resultrd = document.querySelector('.resultrd');
radios.forEach(radio => radio.addEventListener('click', (event) => {
  console.log('change!');
  if(event.target.checked == true) resultrd.textContent = `You like ${event.target.value}`;
  if(event.target.checked == false) resultrd.textContent = '選択されてません';
}));

//radioも選択解除がないので、未選択: value = '' を作ってそこで判断
//解除できるようにしている場合は、.checked == false　で判断

チェックボタン


  var chks = document.querySelectorAll('input[name=kamoku2]');
  chks.forEach(chk => chk.addEventListener('change', (event) => {
    getValue(chks)
  }));
  function getValue($ts) {
    const resultchk = document.querySelector('.resultchk');
      var str = '';
      $ts.forEach(($t) => {
        if($t.checked === true ) str += $t.value + " ";
      });
     if(str == '') resultchk.textContent = '選択されてません';
     if(str != '') resultchk.textContent = `You select ${str}`;
  }

INPUTボックス


//addEventListenerは、複数イベントには対応しない
//カーソルが外れた時に反応
const input = document.querySelector('input');
const log = document.getElementById('log');
input.addEventListener('change', updateValue);
function updateValue(e) {
  log.textContent = e.srcElement.value;
}

vanilla js バリテーション

FormData を使用すると、JavaScript を使って簡単に HTML 形式のフォームを作成し XMLHttpRequest.send()

-> vestjs

-> 日向学院同窓会用フォーム

-> yubinbango:郵便番号ライブラリ(強く推奨)

-> flatpickr:日付ピッカー

-> flatpickr:デモ

ご希望の日時Schedule

-> オートふりがな vanillaバージョン

名前Your Name
ふりがなName Reading