javascript form onsubmit 시 return 활용법!

가끔 form에서 submit을 하려고 하면 다양한 에러사항이 꼿힐때가 많다.

 

필수 입력만을 할떄는 required를 사용하여 해줄 수 있다.

 

하지만 required에서 입력이 됐지만 내가 원하는 형식이 아닐때

 

js 처리를 하려고 했더니 이미 submit으로 묻지도 따지지도 않고 실행!

 

그래서 버튼을 이용해 onlclick 이벤트로 직접 js에서 submit을 하려 했더니

 

이럴수가! required가 동작을 안한다.

 

이것은 동작 순서의 차이에 의해 required를 체크하기전에

 

js부터 실행을 해버려서 그렇다. 그러니 이 두마리의 토끼를

 

다 잡으려면 아래와 같이 해주면 된다.

 

그러면 원하는 js에서의 조건과 required를 동시 사용 할 수 있다!

 

 

 

<form action="url" onsubmit="return test(this);"method="post">

    <input type="text" name="test" id="test" required>

   <input type="submit" id="btn_submit" onclick="" class="btn-apply" value="신청하기"/>

</form>

<script>

function test(f)
{

    if(f.test.value.length < 1){
        alert("텍스트입력 해주셈");
        f.test.focus();
        return false;
    }


    document.getElementById("btn_submit").disabled = "disabled";
    alert("test");
    return true;
}

</script>

 

f는 test(f)로 지정해서 f를 연결자로 사용한것.

 

f뿐 아니라 자기가 원하는걸 해주면 된다.

 

form에서의 test(this)는 this를 그대로 사용해주면 된다.

 

그리고 retrun fasle를 반환하면 action이 실행이 안되며

 

true 일때만 동장하니 완벽!