회원가입 페이지에서 입력 조건 불충족 시, 경고창을 띄운 후, 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 답변
-
일단 답을 드리자면, 사용하신 방법은 이미 해당 폼에
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; } }
-
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... }
댓글 입력