회원가입 페이지에서 입력 조건 불충족 시, 경고창을 띄운 후, submit를 방지하고자 하는데 되지 않습니다.

조회수 1732회
html
    head
        script(src="//code.jquery.com/jquery-3.3.1.min.js")
        title='회원가입페이지'

        script.
            function submitAction(event) {
                var a = $('input[name=username]').val();
                if(a.length===0){
                    alert('아이디를 입력하세요');
                    $('#frm').attr('onsubmit', 'event.preventDefault()');
                }
                return false;
            }


    body
        form(action='register', method='post', id='frm', onsubmit='submitAction();')

            input(type='text', name='username', placeholder='아이디')

            p

            input(type='password', name='password', placeholder='비밀번호')

            p

            input(type='submit', value='회원가입')


알림창은 뜨나 계속 submit이 되버립니다. 어디가 문제일가요?

3 답변

  • 좋아요

    0

    싫어요
    채택 취소하기

    일단 답을 드리자면, 사용하신 방법은 이미 해당 폼에 onsubmit이 터진 후 뒤늦게 onsubmit 속성을 수정하는 것이므로 (그리고 정작 오류 상황시 false를 돌려주지 않으므로) 그냥 제출돼 버리는 것입니다.

    그러면 어떻게 하느냐? 사실 저라면 시중에 잔뜩 나와 있는 form validator 플러그인을 쓰든지, 아니면 html5가 지원하는 required="required", minlength="8" 같은 속성들을 적극 고려해 보겠습니다만..

    // 기본적인 Form validation 구현입니다. 테스트 안해봄
    function submitAction(event) {
    
      // 유효성 판별 변수들을 지정합니다.
      var valid = true;
      var errors = [];
    
      // 규칙을 정의합니다.
      // 언제 유효하지 않게 되는지, 그때 보여줄 에러 메시지는 뭔지 등
      var a = $('input[name=username]').val();
      if(a.length===0){
        valid = false;
        errors.push("아이디를 입력하세요.");
      }
    
      // 규칙을 통과하지 못했다면
      if (!valid) {
    
        // 메시지를 띄우고
        $(errors).each(function(error){
          alert(error);
        });
    
        // 기본동작(폼 제출)을 못하게 합니다.
        return false;
    
      // 규칙을 통과했다면 그냥 기본동작을 하라고 합니다.
      } else {
        return true;
      }
    }
    
    • 항상 감사합니다. 공부 방향 정하는 데 많은 도움이 됩니다. 조영민 2019.7.22 07:20
  • pug

    html
        head
            script(src="//code.jquery.com/jquery-3.3.1.min.js")
            title='회원가입페이지'
    
            script.
                function submitAction() {
                    var a = $('input[name=username]').val();
                    if(a.length==0){
                        alert('아이디를 입력하세요');
                        $('#frm').attr('method', 'get');
                        $('#frm').attr('action', 'register_');      
                    }
                }
    
    
        body
            form(action='register', method='post', id='frm', onsubmit='submitAction();')
    
                input(type='text', name='username', placeholder='아이디')
    
                p
    
                input(type='password', name='password', placeholder='비밀번호')
    
                p
    
                input(type='submit', value='회원가입')
    
    
    

    express

    app.get('/register_', function(req, res){
        res.redirect('/register');
    })
    

    제가 답변 기다리면서 생각해낸 해결책입니다.

  • Mark up:

    onsubmit='submitAction' <= 괄호 빼야 함.
    

    Script:

    function submitAction(event) {
        event.preventDefault();
        // blah blah...
    }
    
    • digda님 답변 감사합니다. 앞으로도 많은 가르침 부탁드립니다. 조영민 2019.7.23 08:47

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

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)