하고 싶었던 일

Form의 input 요소의 밸리데이션을 최소의 노력으로 실현한다. 밸리데이션의 결과, 어디의 무엇이 문제인지를 알면 좋다.

(하고 싶지 않은 것 : Javascript와 HTML5의 사양 추궁 )

할 수 있었다. 라고 생각했습니다만. . .

    <form id="form1">
      <input type="number"
             id="size"
             title="Size"
             maxlength="20"
             min="1"
             required
       />
       <input type="submit" id="simExec" value="実行" />
    </form>

아니, HTML 쓰는 것만으로 validation 해준다니 멋진 세상이 된 것이다, 일 때는 그렇게 생각하고 있었습니다.
Ajax에서 요청 매개 변수를 JSON 형식으로 API로 보내고 싶었기 때문에 버튼의 onclick 이벤트에 보내는 함수를 등록했습니다.

document.getElementById('simExec').addEventListener('click', sendSimRequest);

실은 아직도 수수께끼입니다만, 브라우저를 열어 최초로 송신했을 때만, 송신되지 않고 화면이 리로드됩니다. 그런 다음 버튼을 누르면 요청이 전송됩니다. submit에서 Form이 다시로드되는 것은 사양이지만. . .
처음에도 썼던 것처럼, 이 근처의 사양을 추구하는 것은 피해, submit를 그만두기로 했습니다.

여기에서 본제: Form의 submit 없이 Validation한다

별로 그것이 하고 싶었던 것은 아니지만, 도망친 결과, 거기에 다가갔다는 것입니다.

양식과 제출을 중단했습니다.

    <div id="form1">
      <input type="number"
             id="size"
             title="Size"
             maxlength="20"
             min="1"
             required
       />
       <button type="button" id="simExec">実行</button>
    </div>
    <div id="message" style="color: #ff0000"></div>

submit의 거동으로부터 도망치기 위해서, 이런 느낌으로. 원래 리퀘스트 송신은 JavaScript이었기 때문에, 부담이라고 하는 일도 있었습니다.id="message" 가 갑자기 나오고 있지만 그 이유는 다음과 같습니다.

하지만 validation은 원한다.

input에 정의한 제약은 살아 있습니다! 다만, submit 하지 않으면 그것을 주워 메시지를 팝업 표시하는 액션이 ​​행해지지 않는 것 같습니다.
그래서 다음과 같은 자바 스크립트에서 Validation 결과를 선택하고 오류 메시지로 표시합니다. 여기서 id="message" 를 사용합니다.

function execute() {
  if (!validateInput(document.getElementById('size'))) return false;

  //この後で、例えばリクエスト送信する。
}

function validateInput(element){
  clearMessage();

  if (!element.willValidate) return true;

  if (element.validity.valueMissing) {showMessage(element.title + ":Input required."); return false;}
  if (element.validity.typeMismatch) {showMessage(element.title + ":Type mismatch."); return false;}
  if (element.validity.tooLong) {showMessage(element.title + ":Too long."); return false;}
  if (element.validity.rangeUnderflow) {showMessage(element.title + ":Input value is under the limit."); return false;}
  if (element.validity.rangeOverflow) {showMessage(element.title + ":Input value is over the limit."); return false;}
  if (element.validity.stepMismatch) {showMessage(element.title + ":Input value is not match the step."); return false;}

  return true;
}

말할 필요도 없지만, 내용이지만, 메시지 표시와 지우기의 기능도 게재해 둡니다.

function showMessage(msg){
  document.getElementById('message').innerHTML = msg;
}
function clearMessage(){
  document.getElementById('message').innerHTML = "";
}

편리한 기능이라도, 조금 거기에서 벗어나려고 한 것만으로 레일에 전혀 탈 수 없게 되는, 자주 있는 이야기군요. 그렇지만, validation의 값을 취한 것은 좋았다.

참고문헌

( ㅇㅇㅇㅇㅇㅇㅇㅎㅎ r. 하테나 bぉg. 코m/엔트리/2014/11/01/172318 )
[JavaScript] HTML5 Form Validation 제어 및 주의사항