Javascript – onsubmit 함수 만들기

form submit 이전에 자바스크립트로 먼가를 체크하거나, 경고창을 띄워주기 위해 submit 전에 함수를 먼저 호출해서 처리할 수 있도록 해보자.

너무 기본적인 내용이지만, 코드를 중심으로 남겨둔다.

먼저, html 코드에는 onsubmit 이벤트를 넣어 두도록 한다. 코드를 보자.

<form class="user" method="post" name="form1" onsubmit="return submit_form();">    ...    <input  autocomplete="new-password" class="form-control form-icon-input" type="password" id="id_password1" name="password1" placeholder="Password" required>    <input  autocomplete="new-password" class="form-control form-icon-input" type="password" id="id_password2" name="password2" placeholder="Password" required></form>

여기서 중요한 것은 form 태그에 있는 onsubmit="return submit_form();" 이랑 form name 이다. 이렇게 해두고 아래와 같이 javascript 코드를 추가하면 원하는 대로 할 수 있다.

<script type="text/javascript">    function submit_form() {        var form = document.form1;        if (form.password1.value != form.password2.value) {            alert("패스워드를 확인해주세요!");            form.password2.focus();            return false;        }        text="사용자 등록을 진행하시겠습니까?";        if (!confirm(text)) {            return false;        }        return true;    }</script>

리턴을 false 로 하면 form.submit() 을 수행하지 않으므로 맘대로 로직을 짜서 활용해 보세요 😀

참고 코드

크롬에서 자동완성이 되지 않도록 하고 싶다면, 아래 코드를 html 태그에 에 추가하면 된다. 위의 예제에서 살펴 볼 수 있다.

 autocomplete="new-password" 

@vdekr9