Javascript에서 양식 제출 이벤트를 들으려면 어떻게해야합니까?

Javascript에서 양식 제출 이벤트를 들으려면 어떻게해야합니까?

---

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

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 양식을 제출할 때 호출하려는 함수입니다.

정보 는 MDN에서이 설명서를EventTarget.addEventListener 확인하십시오 .

기본 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. 다른 프레임 워크 / 라이브러리

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

---

확인

You can always do your validation in JavaScript, but with HTML5 we also have native validation.

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

You don't even need any JavaScript! Whenever native validation is not supported, you can fallback to a JavaScript validator.

Demo: http://jsfiddle.net/DerekL/L23wmo1L/

---

This is the simplest way you can have your own javascript function be called when an onSubmit occurs.

HTML

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

JavaScript

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

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

---

Based on your requirements you can also do the following without libraries like jQuery:

Add this to your head:

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;
        }
    }
}

And your form may still look something like:

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

---

With 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