이전
목록
다음
이

그누보드 required 옵션에 대하여

이코아리
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 12년 전 · 2400 · 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,123
12년 전 조회 1,355
12년 전 조회 1,194
12년 전 조회 1,260
12년 전 조회 1,335
12년 전 조회 1,593
12년 전 조회 2,233
12년 전 조회 1,692
12년 전 조회 1,941
12년 전 조회 1,197
12년 전 조회 1,303
12년 전 조회 3,293
12년 전 조회 2,387
12년 전 조회 2,123
12년 전 조회 3,924
12년 전 조회 1,326
12년 전 조회 3,164
12년 전 조회 2,728
12년 전 조회 2,585
12년 전 조회 2,640
12년 전 조회 1,614
12년 전 조회 2,163
12년 전 조회 2,142
12년 전 조회 1,596
12년 전 조회 4,033
12년 전 조회 1,288
12년 전 조회 1,785
12년 전 조회 2,187
12년 전 조회 2,676
12년 전 조회 1,535
12년 전 조회 2,209
12년 전 조회 1,596
12년 전 조회 3,151
12년 전 조회 1,653
12년 전 조회 1,474
12년 전 조회 1,715
12년 전 조회 3,292
12년 전 조회 2,816
12년 전 조회 5,148
12년 전 조회 2,432
12년 전 조회 2,860
12년 전 조회 2,263
12년 전 조회 2,203
12년 전 조회 1,703
12년 전 조회 1,742
12년 전 조회 2,641
12년 전 조회 1,787
12년 전 조회 1,510
12년 전 조회 2,099
12년 전 조회 2,401
12년 전 조회 1,681
12년 전 조회 1,785
12년 전 조회 1,999
12년 전 조회 2,795
12년 전 조회 1,661
12년 전 조회 1,934
12년 전 조회 3,902
12년 전 조회 1,660
12년 전 조회 1,571
12년 전 조회 1,503
12년 전 조회 2,258
12년 전 조회 2,052
12년 전 조회 4,758
12년 전 조회 1,880
12년 전 조회 1,765
12년 전 조회 1,641
12년 전 조회 1,511
12년 전 조회 2,041
12년 전 조회 1,782
12년 전 조회 1,897
12년 전 조회 1,424
12년 전 조회 1,459
12년 전 조회 1,609
12년 전 조회 2,009
12년 전 조회 1,986
12년 전 조회 1,452
12년 전 조회 1,850
12년 전 조회 5,695
12년 전 조회 3,656
12년 전 조회 1,924
12년 전 조회 1,661
12년 전 조회 2,490
12년 전 조회 1,838
12년 전 조회 6,171
12년 전 조회 7,194
12년 전 조회 2,129
12년 전 조회 1,881
12년 전 조회 1,516
12년 전 조회 2,083
12년 전 조회 1,951
12년 전 조회 1,935
12년 전 조회 1,727
12년 전 조회 1,991
12년 전 조회 2,442
12년 전 조회 2,581
12년 전 조회 1,846
12년 전 조회 2,949
12년 전 조회 1,766
12년 전 조회 2,049
12년 전 조회 2,789
이전 첫 페이지 다음
글쓰기