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.
I would like to make this javascript so that I don't have to touch any html code like adding onSubmit or onClick javascript.
Why do people always use jQuery when it isn't necessary?
Why can't people just use simple 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 is a function that you want to call when the form is being submitted.
About EventTarget.addEventListener, check out this documentation on MDN.
To cancel the native submit event (prevent the form from being submitted), use .preventDefault() in your callback function,
document.querySelector("#myForm").addEventListener("submit", function(e){
if(!isValid){
e.preventDefault(); //stop form from submitting
}
});
submit event with librariesIf for some reason that you've decided a library is necessary (you're already using one or you don't want to deal with cross-browser issues), here's a list of ways to listen to the submit event in common libraries:
jQuery
$(ele).submit(callback);
Where ele is the form element reference, and callback being the callback function reference. Reference
<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(){ /*...*/ };
Very straightforward, where $scope is the scope provided by the framework inside your controller. Reference
React
<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
}
Simply pass in a handler to the onSubmit prop. Reference
Other frameworks/libraries
Refer to the documentation of your framework.
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.
.addEventListener still has certain advantages but only in small pages where we wouldn't need a huge framework library - for example one shouldn't include the entire jQuery library just to use .submit. –
Volny getElementById i.e single form is there a way to do this using class? –
Logographic 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();
}
bind is indeed unnecessary. –
Guth 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>
addEventListener instead of onsubmit or onload to allow other developers to add their own listeners. –
Creaturely If you have multiple forms in same page & you wants to handle submit event Listener without using Id
jQuery
$('form').submit(function (event) {
targetObj = event.target;
// do your logic
});
Pure JavaScript trick
Onload just do below way.
for(var i=0; i<document.forms.length; i++){
var form = document.forms[i];
form.addEventListener("submit", myListener,false);
}
credit :- Multiple Form Submit Event Listener Handling using JavaScript credit goes to Jan Pfeifer's Answer on StackOverflow Community
I hope this helps to someone
With jQuery:
$('form').submit(function () {
// Validate here
if (pass)
return true;
else
return false;
});
© 2022 - 2024 — McMap. All rights reserved.
document.forms['yourForm'].onsubmit = function(){}? OraddEventListener? – Scriptorium... using ( document.forms )– Bestial