[js] JS - required 속성 - INPUT 텍스트 필수입력 여부 설정/반환 (= required속성 = 리콰이어드속성) ※ 인풋 리과이어드 속성

목차

1. required 예제 - INPUT 입력 필수 반환
2. required 정의
3. required 구문
4. required 예제 - INPUT 입력 필수 설정

required 예제 - INPUT 입력 필수 반환

 

<form action="/action_page.php">

  Name: <input type="text" id="hz" name="hz" required>

  <input type="submit">

</form>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").required;

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과여부

required 정의

 

FORM 양식 제출(submit) 전, INPUT 텍스트 필수 입력 여부 설정/반환.

 

---

 

1.

INPUT 요소의 required 속성값 설정/반환 의미.

 

2.

IE10 이상 주요 최신 브라우저 지원.

단, Safari 브라우저는 지원 X.

 

required 구문

 

반환

textObject.required

 

설정

textObject.required = true|false

 

---

[속성값]

 

true|false

제출 전 입력 필수 여부 지정.

• true - 제출 전 입력 필수 O
• false - 제출 전 입력 필수 X

 

---

[반환값]

 

• 제출 전 입력 필수 O 경우, true 반환
• 제출 전 입력 필수 X 경우, false 반환.

 

required 예제 - INPUT 입력 필수 설정

 

<form action="/action_page.php">

  사이트: <input type="text" id="hz" name="hz">

  <input type="submit">

</form>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  document.getElementById("hz").required = true;

  document.getElementById("demo").innerHTML = "제출 전 입력필수 설정 완료";

}

</script>

결과보기