Monday, 16 January 2017

jquery form validation using php with mysql database

  No comments

Nowadays jquery or Javascript is more prominent. Every client wants their application to become faster & user interactive so they good user experience, get more customer. Whenever you complete our functionality with ajax request that makes attractiveness because user stays on the same page he sees there task also complete only dom element manipulation occurring. So I figure one common functionality required everywhere which form validation. Without form validation, you can not be complete our functionality of our requirement.

A few days ago I was written a PHP class that deal with validation you can review by click on that link Click. So in this validation, i write methods of different validation like blank, number, email, validation of field from database like a username. When you review code Click you will find there is no ajax no form code only a PHP class which shows validation. So require a javascript class that can use for process our request.

Now we start to create a javascript class for processing form. For my javascript code, i have dependency with bootstrap which common CSS framework, with the usage of that framework you can complete our application with responsive design without any help of a designer.
I write a small chunk of code a form which is below.

In above code, form tag has two selectors like id, action both are required for the form processing. Action are required on which you form being processed. ID is required for pick values suppose if multiple forms then it will more helpful. Another is "Submit" button with their click event we fire a request & process it. After processing it will return JSON format response on the basis of that we can manipulate the DOM elements. So we require a function when we click on the submit button it will perform required function. Now below I write a code.

In above code "server_validation" its function for which need to pass the certain parameter on the basis of that it perform form processing. The parameter explanation is below

form_id:'add_form' // its the Id of form
button_id:'add_button', // its the Id button
after_success:load_success // its the name of function that call after success of form.

With the help of above code you can just validate form but if you want any callback function then call below function

In the above code, every thing is same only I added the "after_success" variable in which I pass the name of the function that needs to call after the success of form.

Demo code

No comments :

Post a Comment