[jQuery] form 처리하는 방법 .submit() event

웹 상에서 사용자에게 입력을 받기 위해 form을 사용한다. 제이쿼리에는 폼을 처리하는 몇 가지 이벤트가 있는데, 오늘은 그 중 .submit()에 대해 알아본다.

폼 양식 내 정보 출력

셀렉터로 사용자가 폼에서 입력한 정보를 가져와 원하는 위치를 지정해 다시 뿌려주는 코드를 작성해보았다.

$(document).ready(function(){
    $("#myForm").submit(function(){
        var name = $("#name").val();
        $("#inputData").append('<p>' + '이름: '+ name + '</p>');
        var email = $("#email").val();
        $("#inputData").append('<p>' + '이메일: ' + email + '</p>');
        return false;
    }); // end submit()
}); // end ready()

먼저 하단의 html 문서를 받아오기 위해 $(document).ready()funtion의 돔 구조로 시작하고, .submit()function으로 서브밋 이벤트를 실행시킨다. 이때 함수명이 지정되지 않은 익명함수를 사용하였다. .val()은 폼의 value를 읽어오거나 지정할 수 있다. name과 email을 각각 셀렉터로 연결한 뒤, .append()로 특정 영역에 삽입해준다.

<form id="myForm">
    이 름  : <input type="text" id='name' name="name"><p>
    이메일 : <input type="email" id='email' name="email"><p>
    <input type="submit" value="전송">
</form>
<div id="inputData"></div>

 

폼 유효성 검사

사용자가 username을 입력했을 때 빈칸인지 아닌지 검증해 알림을 띄우는 코드를 작성해보았다.

$(document).ready(function() {
    $('#signup').submit(function() {
        if ($('#username').val() == '') {
            alert('Please supply a name in the Name field.');
            return false;
        }
    }); // end submit()
}); // end ready()

마찬가지로 돔과 서브밋으로 시작한다. if문으로 empty string('')이 있는지 체크하여, 있다면 alert로 박스알림을 띄워준다. return false; 는 username이 비어있는 상태로 서버로 전송되는 것을 방지하기 위해 반드시 넣어준다.

<form action="process.php" method="post" name="signup" id="signup">
    <div>
         <label for="username" class="label">Name</label>
         <input name="username" type="text" id="username" size="36">
     </div>
    <div>
         <input type="submit" name="submit" id="submit" value="Submit">
     </div>
</form>