테스트 사이트 - 개발 중인 베타 버전입니다

그누보드 required 옵션에 대하여

· 11년 전 · 1368 · 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개

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

required 는 크롬 예약어가 아닌 HTML 표준입니다.
11년 전
제가 말하고 싶은것은 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;
}

로직을 다시 재성생 해야 줘야 된다는게 요지 입니다.
11년 전
무엇을 의도하시는 건지 이해하기가 어렵네요.
11년 전
성별 : <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 는 모든 필드가 체크되어야 한다는 메시지가 뜹니다.
11년 전
오류 나는 주소 한번 적어주세요.
그리고 checkbox 에 name 을 wr_12[] 로 주시면 배열로 값이 넘어갑니다.
11년 전
<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로 변경된 상태입니다.
11년 전
아마 required 사용법에 대해 혼동이 오신 모양인데요.
checkbox 에 개별적으로 required 를 주면, 같은 name 을 가진게 몇개이건 (배열이건 아니건) required 속성을 가진 항목은 모두 check 해야 넘어 가는게 맞습니다. 따라서 취미를 무조건 하나 이상 다중 선택할 수 있도록 원하신다면 별도 script 로 유효성 검사를 하셔야 하는게 맞습니다. 그누보드 기본 배포 코드에는 checkbox 의 required 관련 코드는 포함되어 있지 않습니다.
따라서 지금처럼 needed 라고 바꾸신 것은 잘 하신 일입니다만, 비표준 속성이기 때문에 class="needed" 로 넣어주시고, 이 값으로 원하는 검사를 수행하시는게 더 좋을 것 같습니다.

위의 배열로 넘어간다는 것은 제가 상황에 대한 이해를 잘못 하고 부연설명한 것입니다.
11년 전
requierd 부분에서


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


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

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

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

게시글 목록

번호 제목
19384
27584
6013
6004
27572
5997
5992
5981
5964
5952
5948
5941
5937
5934
5931
19383
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
27509
5869
5866
27505
5865
5860
5857
27503
27481
27462
5856
19511
27458
24547
19374
19373
19371
27453
19370
27449
27441
19366
24544
19365
19361
19360
19358
19356
19354
19351
19348
19346
19339
19334
5849
27439
5846
27434
27429
19331
19329
19328
5841
5840
19326
5834
5831
5826
19324
5821
32040
27426
19320
5816
32030
5815