automatic form validation without submitting

I am trying to change my ways and wonder if someone could help me find my way... LOL

Honestly. I've always used forms in my scripts that a visitor had to submit, and it would reload the page and check the input and display any errors, etc...

What I would like is to be able to have a form simple first/ last/ phone/ email and submit button...

But I would like for the input to be validated as it is entered to ensure that they fill in all 4 fields, and that the phone number format and the email format are valid before they can even click on the submit button.

When they click the submit button, I need to redirect them to a different website, as well as record the info in a DB table, and send an email to the owner of the website that they are visiting.

I'm sure that is a way to accomplish this, but don't know where to start.

If there is a script plugin that I can just include into my php script or something along those lines it would be even better...

If you simply want to validate the input, make sure values are entered in required fields, that emails are in email format, etc you can just use jQuery to monitor each input for changes and validate them.
If you need to check the input against a database for any reason then you need AJAX to post the query away and get a response without leaving the page.
Both of those methods happen as the user enters data into the page and have nothing to do with the form submission (in fact, once anything is flagged as bad or a required field is incomplete you could disable the button).
Recording the info and sending an email would be handled by the PHP script on form submission.

I doubt you will find a custom script that works exactly as you want and PHP scripts won't work the way you want anyway as they require post back.

I've used it in the past and it sounds like it meets your needs. Plus it takes care of the smaller issues that sometimes get over-looked such as firing the focus event on any field that was not validated.

diafol

4 Years Ago

Just a quick one - break the problem down into its component parts. Client-side validation scripts can be found everywhere! You do not have to run JQuery or any other framework / lib for this, although they seem to be used for every little thing these days.

So:

1) Build your form
2) Find a js validation script - hericles' idea about enabling a send button is good - however remember to use server-side validation too as forms/headers can be spoofed or clever little client-side validations circumvented. You can check any input data via ajax (again as mentioend by Hericles), if required, however if it's 'insert' type data, that's probably not necessary, unless you want to check for possible duplicate records.
3) The submit should send your data to a form handling file (post method). I would suggest doing the DB write first before sending the email. If the db write fails, you don't want to send a forked-tongue email.
4) Only if the data passes server-side validation and there is a successful db write and sending of an email do you want to redirect (using header()).

That actually makes a lot of sense, and it entered my mind, but I called myself being in a hurry and just getting it done. My guess is that I will go back and make those changes... especially now since someone else suggested it as well