client-side form validation after clicking SUBMIT

Question

I have 2 php files "source.php" and "target.php". In the source.php part I have,

<form method="POST" id="form1" action="target.php">
...
<input type="submit" name="submit" value="Submit"/>
</form>

When I click on submit it goes to the "target.php" (even if I have errors in the form), but I want that, only after all form fields are validated it will go to the target page, else it shows some kind of warning message and stays on the same page. Please help! Maybe this is a stupid question for some but I am a beginner. (I know how to do all the field validations and its working fine).

Answer 1

Duplicate of duplicate questions.Please search throughly before you post next time.

Generally javascripts are used for validation.But there are cases when javascripts become inefficient,for example when you need to validate country and its states.Its not practical to send the entire list of countries and states to the client. In such scenarios AJAX is used.By using AJAX the client sends the data to server immediatly after the user enters it.then it fetch only the required data.Its a simultaneous two way communication between client and server.for example if the user enters country name as INDIA,using AJAX states of INDIA are loaded for validation,thus saving bandwidth. JavaScript and AJAX are not easy to learn,you must research try and correct different codes.Just google "JavaScript form validation"...

This is from w3Schools...

Required Fields The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted:

function validateForm()
{
    var x=document.forms["myForm"]["fname"].value;
    if (x==null || x=="")
    {
       alert("First name must be filled out");
       return false;
    }
}

The function above could be called when a form is submitted:

Example

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

here is more basic examples http://www.w3schools.com/js/js_form_validation.asp

Good Luck

Answer 2

You can use AJAX to validate your form. JavaScript is not recommended for form validation. A simple tutorial for AJAX Validation is available here

But be aware, even if you are validating your form before submission to target.php, always make sure that you check the data in target.php too. This is because JavaScript can be changed (thanks to the modern DOM interpreters) in the browser. It can be made so that the form is submitted without AJAX verification. So you should check it twice, before and after submission.

Also make sure to escape the data, as user input can never be trusted. You should also user strip_tags($string) to prevent use from inserting php code.

Answer 3

JavaScript is most likely the easiest way to do this (read the other posts).

However, if you don't want to use JavaScript you could always check if all forms are set using isset() or something similar and then passing on the $_POST variables in the URL and grabbing those using $_GET. Of course make sure there isn't any sensitive information in the URL. In addition: you could always work with global variables.

Another way to do this without JavaScript is submit to a database after several checks (like escaping the strings etc.), perhaps even encrypt, but I don't suggest this since this is the long way around.