Updated April 7, 2023
Introduction to jQuery stop form submit
The jQuery stop form submit is the event performed by the user end once the form is submitted to the UI; the data is validating or authenticate from the back end servers; while we want to stop this event during that time, we used the method called the event.preventDefault() method stops the element’s default action and returns the value of the method while the event is stopped. the execution time is also normal, and it displays the result in the UI. We also try to declare the form name invalid; it’s also stopping the execution for navigating the pages.
Syntax:
Each method has its own pre-defined syntax in the jQuery library for utilizing it on the web pages. Therefore the navigating web pages are more important for web-based applications like that; with the help of the <form> tag, we validate the user input data, and it goes to another page. While the execution of the forms, the submit button is needed to navigate the pages based on the conditions.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
$(document).ready(function(){
$(form).click(function(event){
event.preventDefault();
---some jQuery script codes depends upon the requirement---
});
});
</script>
<body>
<form action="" method="">
<input type="text" name="" value=""/>
<input type="submit" name="submit"/>
</form>
-----some html tags depend upon the requirement---
</body></html>The above codes are the basic syntax for html form with jQuery selectors to stop the event-like form submission to the backend. With the help of the event.preventDefault() method the event is to be stopped the form execution.
How to stop form submit in jQuery?
The html form is used to navigate the web page if the user inputs are satisfied with the form conditions; else, it will not move another page; the application stays the same page until the condition is to be true. Whenever we submit the form datas, the handler function is to be taken the inputs, and it helps to move the datas to the next level of authentication; then, it validates the conditions, and it returns the results on the user screen.
If we click the submit button, the event is to be triggered, and it starts to check the user inputs on the validation process until the event.preventDefault() method is used in the script. After the creation of the html forms, the enter key by using the keyboard is to be validated the form submission datas with more data elements in the specific html forms. With the help of clicking the mouse button, the user datas also submitted to the back end with the help of html forms. These events are triggered, and the values are handled by using the handler; it validates the datas it generates the keyCode; this property returns the Unicode character set of codes while pressing the enter key on the keyboard it stops the default behavior that is it stops the event execution.
Examples of jQuery stop form submit
Here are the following examples mention below
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Welcome To My Domain it’s a first example for stopping the form data’s using the jQuery code
</title>
<style>
body {
display: block;
margin-top: 13%;
}
h1 {
color:red;
text-align:center;
}
form {
display: block;
margin: 3 auto;
text-align: center;
width: 355px;
margin: 9px;
padding: 7px;
font-size: 23px;
background-color: red;
}
input {
margin: 3px;
}
</style>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<h1><marquee> Have a Nice Day Users</marquee></h1>
<center>
<form id="first">
<label>Mobile Number</label>
<input type="text" name="mobile">
<br />
<label>City</label>
<input type="text" name="city">
<br />
<input type="submit" value="Submit" />
</form>
</center>
<script>
$(window).ready(function() {
$("#first").on("keypress", function (e) {
console.log("Your inputs are validated and authenticated while we pressing the enter key or clicking the submit button using the mouse");
var vars = e.keyCode || e.which;
if (vars === 13) {
alert("Thanks for entering your inputs and we using the preventDefault() method for to stop the event for form data’s submission on the backend");
e.preventDefault();
return false;
}
});
});
</script>
</body>
</html>Output:
In the above example, we used the preventDefault() method to stop the form events after entering the user inputs on the required form. It also validates and alerts the screen while we press the enter key on the keyboard.
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Welcome To My Domain its a Second Example for to stopping the form validation
</title>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
</head>
<body>
<h1 style="color: violet">
Have a Nice Day users
</h1>
<b>
Your input datas are more important to us please enter valid datas
</b>
<p>
Your data’s are validated in UI itself by using the some authentication codes but here we can stop the form validation
</p>
<form id="second">
<label>Username</label>
<input type="text" name="uname"> <br/><br/>
<br />
<label>Key</label>
<input type="text" name="key"> <br/><br/>
<br />
<input type="submit" value="Submit" /> <br/><br/>
</form>
<button type="button">
Reload
</button>
<script type="text/javascript">
$(document).ready(function () {
$("#second").click(function () {
location.reload(true);
alert('Sorry currently the form will not be supported for entering the values please try again');
});
});
</script>
</body>
</html>Output:
In the second example, we need to enter the inputs for the required text boxes, but once we click or place the cursor to the text box, it alerts the page for not entering the values. We cannot enter the values on the form, so the event is not performed until the issue is resolved.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Welcome To My Domain it’s a Third Example for to stop the form submission</h1>
<form id="third" action="#" method="post">
<label>MobileNumber:</label>
<input type="text" name="mobile"> <br/><br/>
<input type="button" name="validate" value="Validate"></input><br/><br/>
<label>Please Enter your OTP:</label>
<input type="text" name="otp"> <br/><br/>
<input type="submit" id="butn" value="Submit"/><br/><br/>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="button" value="Reload" id="butn1"></input>
<script>
$(document).ready(function () {
$("#third").submit(function (event) {
event.preventDefault();
$("#butn").attr("disabled", true);
$("#butn1").attr("disabled", true);
return true;
});
});
</script>
</body>
</html>Output:
In the final example, we disabled the submit button after entering the details on the form. Like that here, we entered mobile number by using the validate button we can validate the mobile number, and the user mobile receives otp. Once OTP is entered and submitted, the form automatically stops the execution until the browser page is refreshed.
Conclusion
The jQuery codes are used to create and utilize the UI widgets and form creations for the web-based application. But the validation is to be authenticated by the required backend codes, but here we can stop the form validation with the help of preventDefault(), and the page reloads option for the application.
Recommended Articles
This is a guide to jQuery stop form submit. Here we discuss How to stop form submit in jQuery along with the examples and outputs. You may also have a look at the following articles to learn more –
