Simple HTML Form Validation with JQuery

Some years ago, a new Javascript library came out called JQuery, which is very powerful and simplifies many common website and web application tasks. One very useful feature of JQuery is the validation of HTML forms. In a previous blog post, HERE, I developed an ASP.NET MVC Web Application with Entity Framework to work with geospatial data like Latitude and Longitude coordinates, and to calculate distances to Cocoa Beach, Florida locations and Central Florida locations.

This web application is currently hosted on the Microsoft Azure Cloud at the following link URL:

https://geospatial20190511042739.azurewebsites.net/

Also the source code for this web application is publicly viewable on my GitHub source control account at:

https://github.com/Michael-G-Workman/GeoSpatial

The Locations view on this web application lets you enter the name of a location and the Latitude and Longitude of a location, and then when the form is submitted, a list of distances to locations in the Cocoa Beach, Florida area and Central Florida area is provided. This is a simple HTML form that is validated using JQuery.

Not that there are 2 different ways to validate HTML forms with JQuery, the old way is to do the validation with simple JQuery and no special libraries included, and the new way is to use a special library called VALIDATION that makes validating forms very simple and easy to do. In this blog post we will use the old method, and then at a later time in a different blog post, I will show how to use the new method.

Here is the HTML form in the Razor view Locations in the geospatial web application:


Now, since we are going to validate the form with JQuery, and submit the form with JQuery also, we need to change the form so that it does not do a default submit when the submit button is clicked. This is what our submit button looks like before this change.



Note that the button type is SUBMIT, that means when the button is clicked, the form will be submitted, and will be submitted regardless of any JQuery code that is run. That is the default form submit method. However, we need to change this so that the form does not do a default SUBMIT when clicked. We do this by changing the button TYPE from SUBMIT, to BUTTON, like in the following:


Now, after this change, the form will only be submitted after we tell the JQuery code to do the submit, and that will only happen after the JQuery validates the data inputted into the form as being correct data.

Since we are dealing with an ASP.NET MVC Web Application, we will have to create a SCRIPTS section at the bottom of the Locations view and include a JQuery opening statement like the following:



Now, this code will run specific JQuery code when the FindBTN button is clicked, after the button is clicked, we want to check the data in the form elements of the form to make sure that is correct data.

First we will add the following code to setup our validation section, a statement to clear out any previous error messages, and including a boolean variable to be a sentinel whether the form will be submitted or not, and also simple vars for the form elements themselves.

The word ERROR represents a CSS class we are going to use in our generated error messages. It starts with a dot to mean that it is a class in the form element,  to reference a form element by its ID, we use the # sign, a class can apply to one or more HTML elements, but an ID can only apply to one HTML element.




Next we will validate the Location form element to make sure that data was entered into it, and is not an empty string, and if there is an error, we set the boolean sentinel var to FALSE, we will then add some HTML after the element as the error message using the AFTER method. We will use a SPAN html tag to display the error message, with a class of error, and also a class of TEXT-DANGER, which is a Bootstrap css class with red text. This will produce the error message on our html form when the error occurs. We do this with the following:




Next we will validate that a Latitude coordinate was entered in the form, is a proper number, and is in the valid range of -90 to +90. If not, we generate error messages and set the sentinel var to FALSE. With the following:



Next we will validate the Longitude coordinate was entered in the form, is a proper number, and is in the valid range of -180 to +180. If not, we generate error messages and set the sentinel var to false, like in the following:



Now our form validation is complete, if no error was encountered, the sentinel var FORMVALIDATED will still be TRUE. If errors were encountered, error messages will be shown on the web page and the sentinel var will be FALSE.

If the formValidated var is still true, we clear out the previous error messages, and we then submit the form with the following JQuery:



That is all that is needed to validate the Locations form with JQuery, it is infinitely more simple to do than with normal Javascript. You can see the entire source code for this ASP.NET MVC Razor View with its included html form and included JQuery code at the following link in my GitHub source control account:

https://github.com/Michael-G-Workman/GeoSpatial/blob/master/GeoSpatial/Views/Home/Locations.cshtml

Also you can see the completed Geospatial web application which includes this view at the following link, where it is hosted in the Microsoft Azure Cloud:

https://geospatial20190511042739.azurewebsites.net/

In my next blog post about JQuery, I will show how to use the VALIDATION library in JQuery to validate HTML forms. Also a simple thing to do.

Comments

Popular Posts