힙합거러지
67
2020-12-23 22:46:40
4
309
#841954 Tech Q&A html javascript

html tag 그룹화 방법

안녕하세요. 지금 회사에서 프로젝트를 진행중인데

valdation을 공통으로 체크하고자 하는데요.

기본적인 빈값 체크는 모두 완료 했으나

일자를 선택하는 from~to 속성에 대해서 고민이 생겨 글을 쓰게 되었습니다.

예를들어 

<input type="text" id="fromDt" class="required"/>

<input type="text" id="toDt"  class="required"/>

이런 엘리먼트가 두개 있다고 했을때

자바스크립트나 html을 통해서 이 두개의 테그가 같은 그룹이며 두개의 유효성을 체크해야합니다.

ex)from은 to보다 클수가 없다.

그룹화만 하면 될거 같은데 어떤식으로 묶어야 될지 감이 잘 안오네요.

<div>로 묶어서 체크할까 생각해봤는데 이런방법말고 없을까요.

많은 조언 부탁드립니다.

0
0

  • 답변 4

  • 도롱뇽
    2020-12-23 23:43:31


    let fromDt = document.querySelector("#fromDt").value;
    let toDt = document.querySelector("#toDt").value;

    if(toDt < fromDt){
      console.log("에러");
    }


    0
  • 도롱뇽
    2020-12-23 23:46:19


    <input type="text" id="fromDt"  class="fromToDt required"/>
<input type="text" id="toDt"  class="fromToDt  required"/>

javascript.querySelectorAll(".fromToDt").forEach(e => ......

이런식으로 클래스 지정해서 일괄처리 방식도 있을듯 합니다..


    0
  • 힙합거러지
    67
    2020-12-23 23:57:41

    @도롱뇽님 답변감사합니다.

    글을 안달아봐서 답글을 어떻게 하는지 모르겠네요.^^;;

    공통 validation체크하는 방법은 dom에서 input 중 required인 항목들을 가져와서 

    빈값인지 체크하고 빈값이면 해당 input의 라벨을 찾아서 표시해주는 식으로 처리하고 있습니다.

    그래서 말씀 주신 class에 id를 넣어주는 방법은 제가 사용하는 방법에 적용하긴 힘들것 같습니다.

    제가 하고 싶은?건 약간 아래와 같은 개념입니다. 이런게 가능할까 싶어서 질문을 올린거라 조언주신내용은 적용하기 힘들것 같습니다/

    <input type="text" id="fromDt"  class="group required" groupId="dtgroup1"/>
<input type="text" id="toDt"  class="group required" groupId="dtgroup1"/>

    다만 위와 같은 방식도 무엇이 우선순위?인지 알기도 어렵고 해서 드랍했던 방법입니다.ㅠㅠ

    공통처리가 힘드네요. 

    다시한번 답변 감사합니다.

    0
  • _UnKnowN_
    316
    2020-12-24 09:43:56

    동일 클래스로 그룹화하고
    Data Attribute로 from, to 지정해서


    클래스명으로 두 필드 가져오고

    가져온 필드에서 각각 값 가져올 때 

    Data attribute가 from인 것과 to인 것 분리해서 

    처리 가능할 것 같습니다.


    다만, 이 방법은 

    한 페이지에 1개의 From, To가 있을 때에만 가능한 방법이고

    여러 개의 From, To가 있는 상황은 고려되지 않았습니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.