User input validation, client-side or server-side? [PHP/JS]

Question

Is it better to validate user input before it's sent to the server with JS or server side with PHP? Or maybe it's worth doing both just to be on the safe side?

I'm creating a site (very simple at the moment) that has a members area/admin area/etc. At the moment i only have user input of Username and Password, in the future there will be more (email, address, etc), but whats the best practice of checking the data?

Do i throw a load of 'if...else' statements at it until the user gets it right? Or maybe have separate variables for each value entered by the user and set it to true or false if it's correct or wrong? (like e-mail validation to make sure it's in an email format)

There are a lot of ways to do it, but which ones you would suggest? I don't want to be writing 50 lines of code when i could do the job in 10 lines...if that makes sense :p

Any help would be appreciated, thanks! :)

Answer 1

Server-side validation is a must, client-side validation is a plus.

If you only use client-side validation, nefarious people will hack your system to post un-validated stuff - breaking your scripts, and potentially exploiting your system. This is very bad from a security standpoint.

That said, you should also include client-side validation, since that's much quicker than a round trip to the server, and gives your users instant feedback. This'll keep your users happy, and will have them coming back to your site.

So, if possible, use both. If you can't/won't, then at least do it server-side. Client-side-only validation is a recipe for disaster!

Answer 2

Do both.

Client side gives the responsiveness users expect and server side protects your data.

I'm sure PHP has some libraries that would help you much like what ASP.NET MVC does to provide a way of doing both in one step.

Answer 3

Input validation should certainly happen at the server side for safety reasons.

However, to avoid sending a request to the server with invalid data and send the response back to the client, it is nice to have client-side validation as well. This will make your website more responsive. So add client-side validation for user-friendliness.

Answer 4

Validation, ALWAYS server side. I can tamper with your form client-side and fill in crazy values and still get validated. I can't tamper with server-side scripts.

So when checking client-side, you're just saving a little time 'talking' with the server. Never use it to validate your data for real.

Answer 5

Of course you cannot rely just on JavaScript, what if someone has it disabled? JavaScript is only to make the site more user friendly for the user and that he does not have to wait the server each time he makes a mistake. Server side is for you own use so as not to have mistakes on your system!

Answer 6

You should validate this on server-side. The client-side validation is optional. You can declare types of validation for fields, and build generic validator for your forms. If you don't know what i mean try looking at AngularJs declarative code building. It's the best way to build forms, also Angular is good and very fast framework for building forms.

http://angularjs.org/

http://docs.angularjs.org/#!/cookbook/advancedform

Look at this lines:

<input type="text" name="form.address.line1" size="33" ng:required/> <br/>
    <input type="text" name="form.address.city" size="12" ng:required/>,
    <input type="text" name="form.address.state" size="2" ng:required ng:validate="regexp:state"/>
    <input type="text" name="form.address.zip" size="5" ng:required
  validate="regexp:zip"/>

For your server side you can also define some structure, which will contain form fields, validation methods, and error string for each field. Then in loop, validate each field based on your information structure. You can easily manage forms builded that way.

Example in PHP:

Form data:

$formData = array (
    array(
     'ID' => "name",
     'validate' => '/.+/',
     'label' => 'Your name',
     'errorMsg' => "This field is required",
     'type' => 'text' 
    ),
 array(
         'ID' => "Phone number",
         'validate' => '/^[0-9+ ]+$/',
         'label' => 'Numer telefonu',
         'errorMsg' => "Please provide proper telephone number",
         'type' => 'text'
        )
);

Validator and form generator (sorry for simple and messy code here):

$s = '';
foreach ($formData as $input){
    $s .= sprintf('<label for="%s">%s</label>',$input['ID'],$input['label']);
    if (isset($_POST[$input['ID']]) && !empty($input['validate']) && !preg_match($input['validate'],$_POST[$input['ID']])){
        $error = true;
         $s .= sprintf('<div class="formErrorValidate">%s</div>',$input['errorMsg']);
    }
    if (isset($_POST[$input['ID']])) $htmlMsg = str_replace('%'.$input['ID'].'%',$_POST[$input['ID']],$htmlMsg);
    if ($input['type'] == 'textarea'){
        $s .= sprintf('<textarea name="%s" id="%s">%s</textarea>',$input['ID'],$input['ID'],(isset($_POST[$input['ID']])?$_POST[$input['ID']]:''));
    } else {
        $s .= sprintf('<input type="%s" name="%s" id="%s" value="%s"/>',$input['type'],$input['ID'],$input['ID'],(isset($_POST[$input['ID']])?$_POST[$input['ID']]:''));
    }

}