I wanna write my own form validation javascript library and I've been looking on google how to detect if a submit button is clicked but all I found is code where you have to use onClick on onSubmit="function()" in html.
onSubmit や onClick の JavaScript を追加するなど、HTML コードに触れる必要がないようにこの JavaScript を作成したいと思います。
ベストアンサー1
なぜ人々は必要がないのにいつも 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図書館でイベントを聴く
何らかの理由でライブラリが必要であると判断した場合 (既にライブラリを使用している場合や、クロスブラウザの問題に対処したくない場合)、一般的なライブラリで送信イベントをリッスンする方法の一覧を次に示します。
jQuery
$(ele).submit(callback);eleフォーム要素参照とcallbackコールバック関数参照はどこにありますか。参照
<iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>AngularJS (1.x)
<form ng-submit="callback()"> $scope.callback = function(){ /*...*/ };反応する
<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。参照その他のフレームワーク/ライブラリ
フレームワークのドキュメントを参照してください。
検証
検証はいつでも JavaScript で実行できますが、HTML5 ではネイティブ検証も実行できます。
<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">
JavaScript も必要ありません。ネイティブ検証がサポートされていない場合は、JavaScript 検証にフォールバックできます。