자바스크립트로 양식 제출 이벤트는 어떻게 들을 수 있나요?

자바스크립트로 양식 제출 이벤트는 어떻게 들을 수 있나요?

양식 유효성 확인 javascript 라이브러리를 직접 작성하고 싶고 제출 버튼을 클릭하면 검색하는 방법을 구글에서 찾아봤지만 클릭 온에서 사용해야 하는 코드만 발견되었습니다.onSubmit="function()"html로

제출하기나 클릭하기 자바스크립트에서 추가하기 같은 html 코드를 터치할 필요가 없도록 이 자바스크립트를 만들고 싶습니다.

왜 사람들은 jQuery가 필요하지 않을 때 항상 사용합니까?
왜 사람들은 단순한 자바스크립트를 사용할 수 없습니까?

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이벤트(제출 양식 prevent), 콜백 기능에 사용,

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
   }
   

   핸들러를 에 전달하기만 하면 됩니다.onSubmitprop.참조문

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

   프레임워크의 설명서를 참조합니다.

---

확인

항상 자바스크립트로 유효성 검사를 할 수 있지만 HTML5를 사용하면 네이티브 유효성 검사도 가능합니다.

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

자바스크립트도 필요 없어요!네이티브 유효성 검사가 지원되지 않을 때는 언제든지 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>

동일한 페이지에 양식이 여러 개 있고 ID를 사용하지 않고 제출 이벤트 Listener를 처리하려는 경우

jQuery

$('form').submit(function (event) {
    targetObj = event.target;
    // do your logic
});

---

순수 자바스크립트 트릭

부하는 아래로 내려갑니다.

for(var i=0; i<document.forms.length; i++){
    var form = document.forms[i];
    form.addEventListener("submit", myListener,false);
}

credit :- 자바스크립트 크레딧을 사용한 다중 양식 제출 이벤트 청취자 처리는 StackOverflow 커뮤니티의 Jan Paifer's Answer로 이동합니다.

이것이 누군가에게 도움이 되길 바랍니다.

jQuery 사용:

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

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

언급URL : https://stackoverflow.com/questions/7410063/how-can-i-listen-to-the-form-submit-event-in-javascript