(DOM & Events 09) Form 유효성 검사

SoloLearn JS 번역

Form Validation

Form 유효성 검사

  • HTML5 adds some attributes that allow form validation.
    • HTML5는 form 유효성 검사를 가능하게 하는 몇 가지 속성을 추가한다.
  • For example, the required attribute can be added to an input field to make it mandatory to fill in.
    • 예를 들어, required 속성을 input field에 추가해서 반드시 기입하게 만들 수 있다.
  • More complex form validation can be done using JavaScript.
    • JavaScript를 사용해서 보다 복잡한 form 유효성 검사를 수행할 수 있다.
  • The form element has an onsubmit event that can be handled to perform validation.
    • form element에는 유효성 검사를 수행하기 위해 처리할 수 있는 onsubmit 이벤트가 있다.
  • For example, let’s create a form with two inputs and one button.
    • 두 개의 input과 하나의 버튼이 있는 form을 생성해보자.
  • The text in both fields should be the same and not blank to pass the validation.
    • 유효성 검사를 통과하려면, 두 field의 text가 모두 동일해야 하고, 공백이 아니어야 한다.
<form onsubmit="return validation()" method="post">
   Number: <input type="text" name="num1" id="num1">
   Repeat: <input type="text" name="num2" id="num2">
   <input type="submit" value="Submit">

  • Now we need to define the validate() function:
    • 이제 validate() 함수를 정의해야 한다.
function validate() {
   var n1 = document.getElementById("num1");
   var n2 = document.getElementById("num2");
   if (n1.value != "" && n2.value != "") {
      if (n1.value == n2.value) {
         return true;
   alert("The values should be equal and not blank");
   return false;

코드 실행 확인

  • We return true only when the values are not blank and are equal.
    • 값이 공백이 아니고 동일한 경우에만 true를 반환한다.

The form will not get submitted if its onsubmit event returns false.

onsubmit 이벤트가 false를 반환하면, form이 제출되지 않는다.


  • The form will submit to its action if onsubmit returns:
    • onsubmit이 …를 반환하면, form이 제출된다.