티스토리 뷰

정보 보관 ver1.0

Form Validation Check

James Wetzel 2012. 12. 14. 14:52

Form Validation Check


<!DOCTYPE html>

<html lang="ko">

<head>

    <title>Form Validatin</title>

    <meta charset="utf-8" />

    <script src="events.js" type="text/javascript"></script>

    <script type="text/javascript">

        addEvent(window, "load", function () {

            var contactForm = document.getElementById("userForm");

            if (contactForm) {

                addEvent(contactForm, "submit", function (event) {

                    var id = document.getElementById("id");

                    var password = document.getElementById("password");


                    if (id && password) {

                        if (id.value.length === 0) {

                            alert('아이디를 입력해주세요.!');

                            event.preventDefault();

                        }

                        else if (password.value.length === 0) {

                            alert('비밀번호를 입력해주세요.!');

                            event.preventDefault();

                        }

                        else {

                            alert("폼 전송 성공!");

                        }

                    }

                });

            }

        });

    </script>

</head>

<body>

    <h1>Form Valication</h1>

    <form id="userForm" action="#" method="get">

        <ul>

            <li><label for="id">아이디: </label><input type="text" id="id" /></li>

            <li><label for="password">비밀번호: </label><input type="text" id="password" /></li>

            <li><input type="submit" value="전송" /></li>

        </ul>

    </form>

</body>

</html>



events.js


728x90
반응형
저작자표시 비영리 동일조건 (새창열림)