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

자바스크립트 유효성 검사에 대해서 문의드립니다 ㅠ,ㅠ 채택완료

amkor 10년 전 조회 3,549

안녕하세요 ㅠ,ㅠ 이런 질문 죄송합니다 ㅠ,ㅠ 머리 회전?이 안되서 이런거 어떻게 해야할지ㅠ ㅠ, 머리 아프네요 ㅠ,ㅠ

 

우선 사진보시면 "이용부대 시설"에 하나라도 클릭이 안되어 있으면 경고창을 띄우려고 합니다.

한개라도 선택되면 넘어 갈수 있고 그 해당 클릭된것에 "이용갯수"에 입력하지 않으면 경고창을 띄우도록 만들고 있습니다.

 

물론 자바스크립트로요.

 

일단 제가 "이용부대시설", "이용갯수" 목록에 선택이 안되어 있으면 무조건 경고창 띄우게 했으나

 

지금 소스로 적용해보면 "이용부대시설" 중 첫번째 값만 적용되네요 ㅠㅠ

 

두번째 3번째 체크박스 클릭하면 넘어가야 하는데 첫번째 클릭 안됬다고 경고창이 나오네요 ㅠ,ㅠ

 

어떻게 하면 "이용부대시설" 이것을 아무거나 상관없으니 하나라도 선택되어야 하고 선택된 "이용갯수"에 선택이 되도록 경고창 만들어야 하는지 ㅠ,ㅠ



 

</p><p><form="save_form"></p><p><tr></p><p>  <td></p><p>    <span style="font-size: 11pt; line-height: 1.5;"><</span><span class="nodeTag " style="font-size: 11pt; line-height: 1.5;">input</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">input_box</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">type</span>="<span class="nodeValue editable ">checkbox</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">value</span>="<span class="nodeValue editable ">1</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">name</span>="<span class="nodeValue editable ">facility_no[]</span>"</span><span class="nodeBracket editable insertBefore " style="font-size: 11pt; line-height: 1.5;">></span><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p> </p><p>  </td></p><p>  <td></p><p>     <span style="font-size: 11pt; line-height: 1.5;"><</span><span class="nodeTag " style="font-size: 11pt; line-height: 1.5;">input</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">simpleform</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">type</span>="<span class="nodeValue editable ">text</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> </span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">value</span>="<span class="nodeValue editable "></span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">name</span>="<span class="nodeValue editable ">facility_1</span>"</span><span class="nodeBracket editable insertBefore " style="font-size: 11pt; line-height: 1.5;">></span><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p> </p><p><span style="font-size: 11pt; line-height: 1.5;">  </td></span></p><p></tr></p><p><span style="font-size: 14.6666669845581px; line-height: 1.5;"><tr></span></p><p style="font-size: 14.6666669845581px;">  <td></p><p style="font-size: 14.6666669845581px;">    <span style="font-size: 11pt; line-height: 1.5;"><</span><span class="nodeTag " style="font-size: 11pt; line-height: 1.5;">input</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">input_box</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">type</span>="<span class="nodeValue editable ">checkbox</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">value</span>="<span class="nodeValue editable ">1</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">name</span>="<span class="nodeValue editable ">facility_no[]</span>"</span><span class="nodeBracket editable insertBefore " style="font-size: 11pt; line-height: 1.5;">></span><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p style="font-size: 14.6666669845581px;"> </p><p style="font-size: 14.6666669845581px;">  </td></p><p style="font-size: 14.6666669845581px;">  <td></p><p style="font-size: 14.6666669845581px;">     <span style="font-size: 11pt; line-height: 1.5;"><</span><span class="nodeTag " style="font-size: 11pt; line-height: 1.5;">input</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">simpleform</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">type</span>="<span class="nodeValue editable ">text</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> </span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">value</span>="<span class="nodeValue editable "></span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">name</span>="<span class="nodeValue editable ">facility_2</span>"</span><span class="nodeBracket editable insertBefore " style="font-size: 11pt; line-height: 1.5;">></span><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p style="font-size: 14.6666669845581px;"> </p><p style="font-size: 14.6666669845581px;"><span style="font-size: 11pt; line-height: 1.5;">  </td></span></p><p><span style="font-size: 14.6666669845581px; line-height: 1.5;"></tr></span> </p><p><span style="font-size: 14.6666669845581px; line-height: 1.5;"></span><span style="font-size: 14.6666669845581px; line-height: 1.5;"><tr></span></p><p style="font-size: 14.6666669845581px;">  <td></p><p style="font-size: 14.6666669845581px;">    <span style="font-size: 11pt; line-height: 1.5;"><</span><span class="nodeTag " style="font-size: 11pt; line-height: 1.5;">input</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">input_box</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">type</span>="<span class="nodeValue editable ">checkbox</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">value</span>="<span class="nodeValue editable ">1</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">name</span>="<span class="nodeValue editable ">facility_no[]</span>"</span><span class="nodeBracket editable insertBefore " style="font-size: 11pt; line-height: 1.5;">></span><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p style="font-size: 14.6666669845581px;"> </p><p style="font-size: 14.6666669845581px;">  </td></p><p style="font-size: 14.6666669845581px;">  <td></p><p style="font-size: 14.6666669845581px;">     <span style="font-size: 11pt; line-height: 1.5;"><</span><span class="nodeTag " style="font-size: 11pt; line-height: 1.5;">input</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">class</span>="<span class="nodeValue editable ">simpleform</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">type</span>="<span class="nodeValue editable ">text</span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> </span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">value</span>="<span class="nodeValue editable "></span>"</span><span class="nodeAttr editGroup " style="font-size: 11pt; line-height: 1.5;"> <span class="nodeName editable ">name</span>="<span class="nodeValue editable ">facility_3</span>"</span><span class="nodeBracket editable insertBefore " style="font-size: 11pt; line-height: 1.5;">></span><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p style="font-size: 14.6666669845581px;"> </p><p style="font-size: 14.6666669845581px;"><span style="font-size: 11pt; line-height: 1.5;">  </td></span></p><p><span style="font-size: 14.6666669845581px; line-height: 1.5;"></tr></span><span style="font-size: 14.6666669845581px; line-height: 1.5;"> </span></p><p></form></p><p> </p><p><span style="font-size: 11pt; line-height: 1.5;"></span><script type="text/javascript"></p><p><span style="font-size: 11pt; line-height: 1.5;">var facilities = $('save_form').select('input[name="facility_no[]"]');</span></p><p><span style="font-size: 11pt; line-height: 1.5;"></span>for(var i=0; i<facilities.length; i++) {</p><p><span style="font-size: 11pt; line-height: 1.5;">​  </span>var item = facilities[i];<span style="font-size: 11pt; line-height: 1.5;">​</span></p><p><span style="font-size: 11pt; line-height: 1.5;">  </span><span style="font-size: 14.6666669845581px; line-height: 1.5;">if(item.checked==false) {</span><span style="font-size: 11pt; line-height: 1.5;">​     // name값중 </span><span style="font-size: 14.6666669845581px; line-height: 1.5;">facility_no[]에 check가 안되어 있으면 </span><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p><span style="font-size: 11pt; line-height: 1.5;">    </span><span style="font-size: 14.6666669845581px; line-height: 1.5;">alert(' </span><span style="font-size: 14.6666669845581px; line-height: 1.5;">이용부대시설</span><span style="font-size: 14.6666669845581px; line-height: 1.5;">​</span></p><p><span style="font-size: 14.6666669845581px; line-height: 1.5;">를 입력하여 주십시오.');</span><span style="font-size: 11pt; line-height: 1.5;">​</span><span style="font-size: 11pt; line-height: 1.5;"></span></p><p><span style="font-size: 11pt; line-height: 1.5;">  }​</span></p><p><span style="font-size: 11pt; line-height: 1.5;">  </span>if(item.checked==true) {<span style="font-size: 11pt; line-height: 1.5;">​</span></p><p><span style="font-size: 11pt; line-height: 1.5;">    </span>var qty = $('save_form').select('input[name=facility_'+ item.value +']')[0];</p><p><span style="font-size: 11pt; line-height: 1.5;">  ​    </span>if(!qty.value) {<span style="font-size: 11pt; line-height: 1.5;">​</span></p><p><span style="font-size: 11pt; line-height: 1.5;">        </span>alert('<span style="font-size: 14.6666669845581px; line-height: 1.5;">이용갯수</span><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p> </p><p>를 입력하여 주십시오.');<span style="font-size: 11pt; line-height: 1.5;">​</span></p><p><span style="font-size: 11pt; line-height: 1.5;">       </span><span style="font-size: 11pt; line-height: 1.5;">return false;</span><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p><span style="font-size: 11pt; line-height: 1.5;">      }</span></p><p><span style="font-size: 11pt; line-height: 1.5;">   }</span></p><p><span style="font-size: 11pt; line-height: 1.5;">}</span></p><p><span style="font-size: 11pt; line-height: 1.5;"></span></p><p><span style="font-size: 11pt; line-height: 1.5;">​</span></script><span style="font-size: 11pt; line-height: 1.5;">​</span></p><p><span style="font-size: 11pt; line-height: 1.5;">

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

a
10년 전

</p><p>var facilities = $('save_form').select('input[name="facility_no[]"]');</p><p>    var Cnt = 0; </p><p>    </p><p>    for(var i=0; i<facilities.length; i++) {</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>var item = facilities[i];</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span>if(facilities[i].checked){ </p><p><span class="Apple-tab-span" style="white-space:pre">			</span> Cnt += 1;  // 이용부대시설 체크 몇개 되어 있는지 구하기</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">			</span></p><p><span class="Apple-tab-span" style="white-space:pre">			</span>if(item.checked==true) {</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>var qty = $('save_form').select('input[name=facility_'+ item.value +']')[0];</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>if(!qty.value) {</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>alert('부대시설 이용갯수를 입력하여 주십시오.');</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>qty.focus();</p><p><span class="Apple-tab-span" style="white-space:pre">					</span>return false;</p><p><span class="Apple-tab-span" style="white-space:pre">				</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>}</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>if(Cnt==0) { // 만약 이용부대시설이 체크가 하나라도 안되어 있으면 경고창 나오기</p><p>      alert('부대시설 이용부대시설를 입력하여 주십시오.');</p><p><span class="Apple-tab-span" style="white-space:pre">			</span>return false;</p><p>    } </p><p><span class="Apple-tab-span" style="white-space:pre">		</span>if(!confirm('선택하신 정보로 예약을 진행하시겠습니까?')) return false;</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>return true;</p><p><span class="Apple-tab-span" style="white-space: pre;">	</span>}, </p><p> </p><p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인