자바 스크립트에서 양식 제출 이벤트를 수신하려면 어떻게해야합니까?

내 양식 유효성 검사 자바 스크립트 라이브러리를 작성하고 싶습니다 .Google에서 제출 버튼이 클릭되었는지 감지하는 방법을 찾고 있었지만 내가 찾은 것은 onSubmit="function()"HTML에서 onClick을 사용해야하는 코드뿐입니다 .

onSubmit 또는 onClick javascript를 추가하는 것과 같은 HTML 코드를 만질 필요가 없도록이 자바 스크립트를 만들고 싶습니다.

왜 사람들은 필요하지 않을 때 항상 jQuery를 사용합니까?
사람들은 왜 단순한 JavaScript를 사용할 수 없습니까?

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

callback 양식이 제출 될 때 호출하려는 함수입니다.

에 대해 EventTarget.addEventListener, MDN에서이 문서를 확인하세요. .

네이티브 submit이벤트 를 취소하려면 (양식 제출 방지) .preventDefault()콜백 함수에서 사용 합니다.

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

submit도서관 에서 이벤트 듣기

어떤 이유로 라이브러리가 필요하다고 결정한 경우 (이미 하나를 사용하고 있거나 브라우저 간 문제를 처리하지 않으려는 경우) 다음은 공통 라이브러리에서 제출 이벤트를 수신하는 방법 목록입니다.

1. jQuery

   $(ele).submit(callback);

   ele양식 요소 참조는 어디에 callback있으며 콜백 함수 참조가됩니다. 참고

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

2. AngularJS (1.x)

   <form ng-submit="callback()">
   
   $scope.callback = function(){ /*...*/ };

   컨트롤러$scope 내부의 프레임 워크에서 제공하는 범위는 매우 간단 합니다 . 참고

3. 반응

   <form onSubmit={this.handleSubmit}>
   
   class YourComponent extends Component {
       // stuff
   
       handleSubmit(event) {
           // do whatever you need here
   
           // if you need to stop the submit event and 
           // perform/dispatch your own actions
           event.preventDefault();
       }
   
       // more stuff
   }

   핸들러를 onSubmit소품에 전달하기 만하면 됩니다. 참고

4. 기타 프레임 워크 / 라이브러리

   프레임 워크 문서를 참조하십시오.

확인

JavaScript에서 항상 유효성 검사를 수행 할 수 있지만 HTML5에는 기본 유효성 검사도 있습니다.

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

JavaScript도 필요하지 않습니다! 네이티브 유효성 검사가 지원되지 않을 때마다 JavaScript 유효성 검사기로 대체 할 수 있습니다.

데모 : http://jsfiddle.net/DerekL/L23wmo1L/

이것이 onSubmit발생 했을 때 자신의 자바 스크립트 함수를 호출 할 수있는 가장 간단한 방법 입니다.

HTML

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

자바 스크립트

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}

요구 사항에 따라 jQuery와 같은 라이브러리없이 다음을 수행 할 수도 있습니다.

이것을 머리에 추가하십시오.

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

양식은 여전히 ​​다음과 같이 보일 수 있습니다.

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

jQuery 사용 :

$('form').submit(function () {
    // Validate here

    if (pass)
        return true;
    else
        return false;
});