A great way lớn improve the user experience of your website is khổng lồ validate và submit forms without a page refresh.Bạn sẽ xem: Submit a size without page refresh using jquery, ajax, php và mysql
In this tutorial, I"ll show you how easy it is to vì just that—validate & submit a tương tác form without page refresh using jQuery! Let"s get started.
Bạn đang xem: Jquery form validation before ajax submit, easy form validation with jquery
What We"re Building
In this example, we have a simple liên hệ form with name, email, and phone number. The khung submits all the fields to lớn a PHP script without any page refresh, using native jQuery functions.
1. Build the HTML Form
Let"s take a look at our HTML markup. We begin with our basic HTML form:
Name email Phone liên hệ US We are waiting to hear from you!
You might notice that I have included a div with id contact_form that wraps around the entire form.
Be sure lớn not miss that div in your own form as we will be needing this wrapper div later on. You might also notice that I have left both the kích hoạt and the method parts of the size tag blank. We actually don"t need either of these here, because jQuery takes care of it all later on.
Another important thing is to be sure to lớn include the id values for each input field. The id values are what your jQuery script will be looking for khổng lồ process the form with.
We are also doing some very basic client-side validation using HTML5 attributes like required and minlength. The minlength attribute will make sure that users supply a name that is at least three characters long. Similarly, the required attribute makes sure that users fill out all the khung values you need.
You can read more about these attributes in our tutorial on validating form inputs using only HTML5 and Regex.
I"ve added some CSS styles to produce the following form:
* box-sizing: border-box;body font-family: "Roboto Slab"; font-size: 1.5rem; font-weight: 300;div#contact_form width: 800px; display: flex; align-items: stretch; justify-content: space-evenly; border: 2px solid black; padding: 10px;div.input-box display: flex; margin: 10px 0; flex-wrap: wrap;div.input-box label display: inline-block; margin: 10px 10px 10px 0; width: 20%;div.input-box input font-size: 1.5rem; border: 1px solid #ccc; padding: 4px 8px; flex: 1;input.button font-size: 1.5rem; background: black; color: white; border: 1px solid black; margin: 10px; padding: 4px 40px;h1 font-size: 5rem; text-transform: uppercase; font-family: "Passion One"; font-weight: 400; letter-spacing: 2px; line-height: 0.8;div.greetings text-align: center; font-size: 1.2rem; background-color: #d3d3d3; background-image: linear-gradient(15deg, transparent 28%, rgba(255, 255, 255, 0.5) 28%); background-size: 50px;div.input-box input.error border: 2px dashed red; background: #fee;div.input-box label.error color: red; font-size: 1rem; text-align: right; width: 100%; margin: 10px 0;
2. Begin Adding jQuery
The next step in the process is to địa chỉ cửa hàng some jQuery darkedeneurope.com.com. I"m going khổng lồ assume that you have downloaded jQuery, uploaded to your server, và are referencing it in your webpage.Next, open up another new JavaScript file, reference it in your HTML as you would any normal JavaScript file, and add the following:
$(function() // mix up size validation here );This function runs as soon as the HTML document is ready. If you have done any work in jQuery previously, this function is the same as jQuery"s document.ready function. Inside, we will set up our validation darkedeneurope.com.com.
3. Write Some form Validation
We will now write some basic form validation using jQuery. This will improve upon the validation we have so far. Using a validation library gives us more control over the error messages that are shown to lớn users. It also requires minimal or no changes in the markup of the form.
Starting by loading the jQuery Validation library on your webpage. Now, just add the following darkedeneurope.com.com:
Using the validation library also allows you to địa chỉ cửa hàng conditional validation ngắn gọn xúc tích to your forms. For example, you will be able to add darkedeneurope.com.com that requires a phone number only when the email address has not been provided. I have covered this in more detail in the jQuery size validation tutorial.
Xem thêm: lọc trùng trong mảng php
4. Process khung Submission With the jQuery AJAX Function
Now we get to lớn the heart of the tutorial—submitting our khung without page refresh, which sends the form values lớn a PHP script in the background. Let"s take a look at all the darkedeneurope.com.com first, & then I will break it down into more detail next. Showroom the following darkedeneurope.com.com just below the validation snippet we added previously:
$( "form" ).on( "submit", function(e) { var dataString = $(this).serialize(); // alert(dataString); return false; $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function () { $("#contact_form").html(""); $("#message") .html("
Contact form Submitted!
") .append("We will be in cảm ứng soon.") .hide() .fadeIn(1500, function () { $("#message").append( "
Now we get to our main AJAX function, the star of today"s show. This is where all the kích hoạt happens, so pay close attention!
$("form").on("submit", function (e) var dataString = $(this).serialize(); $.ajax( type: "POST", url: "bin/process.php", data: dataString, success: function () // Display message back lớn the user here ); e.preventDefault(););Basically, what"s going on in the darkedeneurope.com.com is this: The .ajax() function processes the values from our string called dataString with a PHP script called bin/process.php, using the HTTP POST method type. If our script processed successfully, we can then display a message back khổng lồ the user, and finally return false so the page does not reload. That"s it! The entire process is handled right there in these few lines!
There are more advanced things you can vày here, other than giving a success message. For example, you could send your values to a database, process them, & then display the results back khổng lồ the user. So if you posted a poll to users, you could process their vote, and then return the voting results, all without any page refresh required.
Let"s summarize what happened in our example, to be sure we have covered everything. We grabbed our khung values with jQuery using the serialize() method, & then placed those into a string like this:
var dataString = $(this).serialize();Then we used jQuery"s ajax() function to lớn process the values in the dataString. After that process finishes successfully, we display a message back to lớn the user and return false so that our page does not refresh:
$.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function() { $("#contact_form").html(""); $("#message").html("
Contact khung Submitted!
") .append("We will be in touch soon.") .hide() .fadeIn(1500, function() { $("#message").append("
Conclusion
By now, I think you will have to lớn agree that it"s incredibly easy to submit forms without page refresh using jQuery"s powerful ajax() function. Just get the values in your JavaScript file, process them with the ajax() function, and return false. You can process the values in your PHP script just lượt thích you would any other PHP file, the only difference being that the user does not have to wait for a page refresh—it all happens silently in the background.
So if you have a contact form on your website, a login form, or even more advanced forms that process values through a database & retrieve the results, you can vị it all easily & efficiently with AJAX.
Learn JavaScript With a không lấy phí Course
If you want to lớn master JavaScript, be sure to kiểm tra out our không tính phí course lớn learn the complete A-Z of modern JavaScript fundamentals.
In this course, you"ll learn all of the essential concepts of the JavaScript language. That"s right: all of them! Including the most important recent improvements lớn the language, in JavaScript ES6 (ECMAScript 2015) và JavaScript ES7 (ECMAScript 2016).
You"ll start with the very fundamentals of the language: variables and datatypes. Then in each lesson you"ll build knowledge, from data structures like arrays và maps khổng lồ loops, control structures, and functions. Along with the basics of the language, you"ll also learn some key built-in APIs for manipulating data, AJAX, & working with the web browser DOM. Finally, you"ll get a look at some of the most powerful và widely used website APIs that are supported by all modern browsers.
