<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개
제가 말하고 싶은것은 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;
}
로직을 다시 재성생 해야 줘야 된다는게 요지 입니다.
<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;
}
로직을 다시 재성생 해야 줘야 된다는게 요지 입니다.
성별 : <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 는 모든 필드가 체크되어야 한다는 메시지가 뜹니다.
<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 는 모든 필드가 체크되어야 한다는 메시지가 뜹니다.
<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로 변경된 상태입니다.
<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로 변경된 상태입니다.
아마 required 사용법에 대해 혼동이 오신 모양인데요.
checkbox 에 개별적으로 required 를 주면, 같은 name 을 가진게 몇개이건 (배열이건 아니건) required 속성을 가진 항목은 모두 check 해야 넘어 가는게 맞습니다. 따라서 취미를 무조건 하나 이상 다중 선택할 수 있도록 원하신다면 별도 script 로 유효성 검사를 하셔야 하는게 맞습니다. 그누보드 기본 배포 코드에는 checkbox 의 required 관련 코드는 포함되어 있지 않습니다.
따라서 지금처럼 needed 라고 바꾸신 것은 잘 하신 일입니다만, 비표준 속성이기 때문에 class="needed" 로 넣어주시고, 이 값으로 원하는 검사를 수행하시는게 더 좋을 것 같습니다.
위의 배열로 넘어간다는 것은 제가 상황에 대한 이해를 잘못 하고 부연설명한 것입니다.
checkbox 에 개별적으로 required 를 주면, 같은 name 을 가진게 몇개이건 (배열이건 아니건) required 속성을 가진 항목은 모두 check 해야 넘어 가는게 맞습니다. 따라서 취미를 무조건 하나 이상 다중 선택할 수 있도록 원하신다면 별도 script 로 유효성 검사를 하셔야 하는게 맞습니다. 그누보드 기본 배포 코드에는 checkbox 의 required 관련 코드는 포함되어 있지 않습니다.
따라서 지금처럼 needed 라고 바꾸신 것은 잘 하신 일입니다만, 비표준 속성이기 때문에 class="needed" 로 넣어주시고, 이 값으로 원하는 검사를 수행하시는게 더 좋을 것 같습니다.
위의 배열로 넘어간다는 것은 제가 상황에 대한 이해를 잘못 하고 부연설명한 것입니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 19384 | |
| 27584 | |
| 6013 | |
| 6004 | |
| 27572 | |
| 5997 | |
| 5992 | |
| 5981 | |
| 5964 | |
| 5952 | |
| 5948 | |
| 5941 | |
| 5937 | |
| 5934 | |
| 5931 | |
| 19383 |
MySQL
mysqldump시 한글 깨짐문제..
|
| 5926 | |
| 5923 | |
| 5913 | |
| 24558 | |
| 5912 | |
| 30895 | |
| 27563 | |
| 5907 | |
| 5903 | |
| 5900 | |
| 27556 | |
| 5898 | |
| 24555 | |
| 5894 | |
| 5893 | |
| 5890 | |
| 5884 | |
| 27537 | |
| 5881 | |
| 5878 | |
| 30888 | |
| 30884 | |
| 5876 | |
| 5874 | |
| 27524 | |
| 27514 | |
| 19379 | |
| 19377 |
jQuery
깔끔한 탭메뉴 드립니다.
1
|
| 27509 | |
| 5869 | |
| 5866 | |
| 27505 | |
| 5865 | |
| 5860 | |
| 5857 | |
| 27503 | |
| 27481 | |
| 27462 | |
| 5856 | |
| 19511 | |
| 27458 | |
| 24547 | |
| 19374 | |
| 19373 | |
| 19371 | |
| 27453 | |
| 19370 |
기타
3단 레이어 소스
|
| 27449 | |
| 27441 | |
| 19366 | |
| 24544 | |
| 19365 |
JavaScript
스크롤바 색깔 바꾸는 스크립트
|
| 19361 | |
| 19360 |
JavaScript
윈도우의 창띄위기 소스입니다.
|
| 19358 |
JavaScript
익스에서 깜박임 글자 구현법
1
|
| 19356 |
JavaScript
자바스크립트를 이용해서 모바일에 selet 박스 구현한것입니다
1
|
| 19354 |
JavaScript
새창띄우는 소스입니다.
1
|
| 19351 | |
| 19348 | |
| 19346 | |
| 19339 |
jQuery
제이쿼리를 이용한 펼침메뉴 1차입니다.
6
|
| 19334 | |
| 5849 | |
| 27439 | |
| 5846 | |
| 27434 | |
| 27429 | |
| 19331 |
PHP
메쏘드 static 선언
2
|
| 19329 |
JavaScript
마우스 오버시 이미지 바꾸기
1
|
| 19328 |
JavaScript
일정시간후 스크립트 실행
|
| 5841 | |
| 5840 | |
| 19326 |
정규표현식
구글 로봇 접근막기!
1
|
| 5834 | |
| 5831 | |
| 5826 | |
| 19324 |
PHP
시리얼번호생성기
1
|
| 5821 | |
| 32040 | |
| 27426 | |
| 19320 | |
| 5816 | |
| 32030 | |
| 5815 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기