Validating form elements

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.

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. 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. 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 Find BTN 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.

If errors were encountered, error messages will be shown on the web page and the sentinel var will be FALSE.

If the form Validated 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. NET MVC Razor View with its included html form and included JQuery code at the following link in my Git Hub source control account: Spatial/blob/master/Geo Spatial/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: In my next blog post about JQuery, I will show how to use the VALIDATION library in JQuery to validate HTML forms. 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.For a basic introduction to these concepts, with examples, see the Form validation tutorial. Even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without HTML5 and without Java Script) or by bad guys trying to trick your web application.Therefore, like with HTML4, you need to also validate input constraints on the server side, in a way that is consistent with what is done on the client side.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.

Tags: , ,