Hello, World!
이전
목록
다음
이

그누보드 required 옵션에 대하여

이코아리
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 12년 전 · 2707 · 16

<input type="checkbox" name="a[]" required>
<input type="checkbox" name="a[]" required>

checkbox 는 여러개 중에서 다중 선택이 가능 하다는 정도.

대신에 radiobox 는 여러개 중에서 한가지만 선택이 가능 하다는것.


문제는 checkbox와 radio 에 required 옵션을 주는 경우

크롬에서는  wrest.js 에서 required 옵션을 체크하기 전에  먼저  크롬 자신이 required 를  검색해서 

radio 박스나 checkbox 의 모든 항목을 체크하도록 요구하는 이상한 상황이 발생합니다. 


required 는 크롬 예약어 인것 같은데 needed 나 다른 option으로 바꿔야 할듯하군요.

#개발자톡 #개발자
|

댓글 16개

지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
이 상황에서는 radio 를 쓰시는게 적절할 것으로 보입니다만..
모든 radio 를 체크하도록 요구하지 않는 것은 name 값을 동일하게 부여하지 않으셨기 때문입니다.

required 는 크롬 예약어가 아닌 HTML 표준입니다.
이이코아리
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
제가 말하고 싶은것은 required 가 크롬 예약어인가 중요한것이 아니고

<form onsubmit="return check_form(this)">
<label><input type="radio" name="mb_11" value="3" required>1</label>
<label><input type="radio" name="mb_11" value="3" required>2</label>
<label><input type="radio" name="mb_11" value="3" required>3</label>
<input type="submit" value="전송">
</form>

<script src="wrest.js">

wrest.js

var forms = document.getEelemntsByTagName("form");

for(var in in forms)
{
forms[i].onsubmit = ....
}


일반적으로 required 를 attr 로 넣어 주면 자동으로 필수 입력값을 체크해주기를 원했으나

checkbox 나 radio 에 attr를 required 를 주었을 경우에는

onsubmit이 실행되기 전에 브라우저에서 먼저 required 를 체크해서

모든 radio 가 체크 되기를 강제 당하기 때문에,

무조건 폼이 전송되지 못한다는 겁니다.

결국

var check_form = function(f)
{
// radio에 값이 입력됫는지 체크
// checkbox에 값이 입력됬는지 체크

return true;
}

로직을 다시 재성생 해야 줘야 된다는게 요지 입니다.
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
무엇을 의도하시는 건지 이해하기가 어렵네요.
이이코아리
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
성별 : <label> <input type="radio" name="wr_11" value="female" required>여성</label>
<label> <input type="radio" name="wr_11" value="male" required>남성</label>

<br>

취미 <label> <input type="checkbox" name="wr_12[]" value="1" required>농구</label>
<label> <input type="checkbox" name="wr_12[]" value="2" required>축구</label>


이경우 성별은 남성과 여성중에 하나를 선택해야 하고

취미는 자신이 하는 것들만 선택해야 하는데,


required 가 들어갈 경우 그리고 브라우저가 크롬인 경우


radio box 임에도 불구하고 남성과 여성 모두 선택하라는 메시지가 뜨고

checbox 는 모든 필드가 체크되어야 한다는 메시지가 뜹니다.
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
오류 나는 주소 한번 적어주세요.
그리고 checkbox 에 name 을 wr_12[] 로 주시면 배열로 값이 넘어갑니다.
이이코아리
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
<form method="get" >
<ul>
<li>
성별 : <label><input type="radio" name="sex[member]" value="1" required>여성</label> <label><input type="radio" name="sex[member]" value="2" required>남성</label>
</li>
<li>
취미 : <label><input type="checkbox" name="sex2[]" value="1" required>여성</label> <label><input type="checkbox" name="sex2[]" value="2" required>남성</label>
</li>
</ul>

<input type="submit" value="submit">
</form>



크롬에서 해보니

radio 박스는 제대로 되는군요


익스 8. 사파리에서는 문제가 되지 않는데,

크롬에서만 checkbox 에서 문제가 생깁니다.


//추가적으로
name ="wr_12[]" 로 한것은 말씀하신대로 배열로 받기위해서 입니다.

그러나

name ="wr_12[]" 했다해서 값이 반드시 배열로 넘어가지 않습니다.

2개 이상 체크했을때만 배열로 넘어갑니다.




http://gangsaland.com/bbs/write.php?bo_table=job


wrest.js 대신에

form.js 를 사용하도록 변경되었으며,

required 는 needed로 변경된 상태입니다.
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
아마 required 사용법에 대해 혼동이 오신 모양인데요.
checkbox 에 개별적으로 required 를 주면, 같은 name 을 가진게 몇개이건 (배열이건 아니건) required 속성을 가진 항목은 모두 check 해야 넘어 가는게 맞습니다. 따라서 취미를 무조건 하나 이상 다중 선택할 수 있도록 원하신다면 별도 script 로 유효성 검사를 하셔야 하는게 맞습니다. 그누보드 기본 배포 코드에는 checkbox 의 required 관련 코드는 포함되어 있지 않습니다.
따라서 지금처럼 needed 라고 바꾸신 것은 잘 하신 일입니다만, 비표준 속성이기 때문에 class="needed" 로 넣어주시고, 이 값으로 원하는 검사를 수행하시는게 더 좋을 것 같습니다.

위의 배열로 넘어간다는 것은 제가 상황에 대한 이해를 잘못 하고 부연설명한 것입니다.
이이코아리
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
requierd 부분에서


해당 wrest.js 를 form.js 로 교체 햇을때


크롬을 제외한 모든 브라우저에서는 정상적으로 checkbox, radio, select 박스의 유효성을 검사하는데,

크롬에서만 checkbox 에서 문제를 일으켜서 (즉 required 옵션을 크롬에서만 인식을 하는것 같습니다.)

required 가 html 표준 코딩이라면 다른 옵션명으로 교체하는게 맞지 않나 싶어서 말씀 드렸습니다.
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
의도는 잘 알겠습니다만 비표준 요소를 포함시켜야 할 이유로는 충분치 않은 것 같습니다.
의견 감사합니다. 좋은 하루 되세요. ^^
모모노폴리
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
아하 required가 그누에서 만든 명령어인 줄 아셨나 보군요!
이이코아리
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
그누보드에서는 required 라는 option을 사용합니다.

required 라는 option 대신에 다른 option 이름으로 변경됬으면 합니다.
zzzzz
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
required 가 그누보드에서 javascript 으로 잡아내는 역활을 하고
html5 에서 지원됩니다.
그래서 html5 가 나오기 전에 웹표준과 맞지 않아 고생한 기억이 있네요.

xhtml -> required="required"
천천국나무
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
required 꼭 사용해야 하나요? radio 보다 checkbox 낫지 않나요? 자바스립트로 무조건 하나 선택하게 해주고 폼에서 checkbox 필수로 해주고 체크박스중 하나는 무조건 체크해주도록 자바스크립으로 처리하면 더 이쁘지 않나요?
바보천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
댓글 내리면서 이 내용을 쓰고 싶었는데 천국나무님께서 쓰셨네요. ^^
radio는 어차피 한 개의 필드에 checked를 해 두면 필수 선택이 되는데 required가 필요할까 싶은 생각이 들었습니다.
그건 제 생각이고 천국나무님 댓글이 3초의 시간차를 두고 똑같이 등록이 됐는데 냑에서 종종 있나봐요. 어제도 다른 회원님 댓글이 중복 등록 되는 걸 봤는데...
천천국나무
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
required 꼭 사용해야 하나요? radio 보다 checkbox 낫지 않나요? 자바스립트로 무조건 하나 선택하게 해주고 폼에서 checkbox 필수로 해주고 체크박스중 하나는 무조건 체크해주도록 자바스크립으로 처리하면 더 이쁘지 않나요?
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12년 전 조회 2,403
12년 전 조회 1,635
12년 전 조회 1,491
12년 전 조회 1,531
12년 전 조회 1,608
12년 전 조회 1,861
12년 전 조회 2,496
12년 전 조회 1,995
12년 전 조회 2,250
12년 전 조회 1,494
12년 전 조회 1,605
12년 전 조회 3,575
12년 전 조회 2,666
12년 전 조회 2,421
12년 전 조회 4,208
12년 전 조회 1,609
12년 전 조회 3,441
12년 전 조회 3,014
12년 전 조회 2,860
12년 전 조회 2,913
12년 전 조회 1,893
12년 전 조회 2,443
12년 전 조회 2,439
12년 전 조회 1,870
12년 전 조회 4,330
12년 전 조회 1,575
12년 전 조회 2,070
12년 전 조회 2,476
12년 전 조회 2,948
12년 전 조회 1,828
12년 전 조회 2,516
12년 전 조회 1,904
12년 전 조회 3,434
12년 전 조회 1,916
12년 전 조회 1,744
12년 전 조회 2,024
12년 전 조회 3,580
12년 전 조회 3,109
12년 전 조회 5,417
12년 전 조회 2,712
12년 전 조회 3,163
12년 전 조회 2,547
12년 전 조회 2,504
12년 전 조회 2,028
12년 전 조회 2,058
12년 전 조회 2,922
12년 전 조회 2,096
12년 전 조회 1,832
12년 전 조회 2,408
12년 전 조회 2,708
12년 전 조회 1,990
12년 전 조회 2,114
12년 전 조회 2,327
12년 전 조회 3,095
12년 전 조회 1,996
12년 전 조회 2,276
12년 전 조회 4,226
12년 전 조회 1,985
12년 전 조회 1,900
12년 전 조회 1,849
12년 전 조회 2,560
12년 전 조회 2,375
12년 전 조회 5,078
12년 전 조회 2,198
12년 전 조회 2,092
12년 전 조회 1,969
12년 전 조회 1,835
12년 전 조회 2,366
12년 전 조회 2,078
12년 전 조회 2,253
12년 전 조회 1,750
12년 전 조회 1,812
12년 전 조회 1,950
12년 전 조회 2,341
12년 전 조회 2,310
12년 전 조회 1,783
12년 전 조회 2,188
12년 전 조회 5,995
12년 전 조회 3,982
12년 전 조회 2,252
12년 전 조회 1,987
12년 전 조회 2,806
12년 전 조회 2,144
12년 전 조회 6,446
12년 전 조회 7,489
12년 전 조회 2,457
12년 전 조회 2,237
12년 전 조회 1,866
12년 전 조회 2,400
12년 전 조회 2,269
12년 전 조회 2,274
12년 전 조회 2,047
12년 전 조회 2,306
12년 전 조회 2,773
12년 전 조회 2,889
12년 전 조회 2,171
12년 전 조회 3,269
12년 전 조회 2,090
12년 전 조회 2,383
12년 전 조회 3,106
이전 첫 페이지 다음
글쓰기