PHP - Forms - Validating. Best Practice?

[GumbiRo]

Hello everyone! I would love your feedback/help/advice/tips on this situations.


Im currently creating a form to "register" on a database but I wanted to do what could be the 'best' practice when doing this.

What Im looking at is 4 possible problems:

1.-User not adding anything on the input, thus submitting null values.
2.-User submiting a user that already exists in the database.
3.-Regex validation, I guess.
4.- Password verification.

Here's the form:

<form action="sec_register.php" name="registration_form" method="post">
Name: <input type="text" name="name" id="username"><br>
E-mail: <input type="text" name="email" id="email"><br>
Password: <input type="text" name="password" id="password"><br>
Re-Type Password: <input type="text" name="repassword" id="repassword"><br>
<button type="submit" class="btn" onclick="registerUser(this.form, this.form.password);">Register</button></form>

My thought-process to solving this problems is this:(accordingly for each problem I previously stated)

1.Make the submit button disabled if any of the inputs is null/empty.

2.Check the username && email to see if there's the same mail/username used.
3.Regex Validation.

4.Password verification.

Now, I had a regex validation but it goes before submitting. 
The advice Internet has given me is to do validations server side and not browser side because if security.

But I've got a couple of functions on js to help out(against advice, so that's why I come to you :[ ) 


 

function formValidation(form, password)
{
// Get fields.
var validate_name = document.getElementById("username");
var validate_mail = document.getElementById("mail");
var validate_password = document.getElementById("password");
var validate_repassword = document.getElementById("repassword");
var form_is_empty = TRUE;
var form_is_valid = FALSE;

if(validate_name == null) {
//Exit and tell user name is empty
form_is_empty = true;
} else {
if(validate_mail == null) {
//Exit and tell mail is empty
form_is_empty = true;
} else {
if(validate_password == null){

//Tell user password is empty
form_is_empty = true;
} else {
form_is_empty = false;
}

if(form_is_empty != true){


if(validate_password == validate_repassword){

//Continue with validation
} else {

///Disable button and send a message to user that it's not the same password.
return false;
}

//Im clueless on how to add the php part on checking if the username is already chosen.
//I need your help on that one.
//But if the username/mail hasn't been used then form_is_valid = true;


if(form_is_valid) {

register_the_user(username,email,password);

}

 

 

I tried it formally but didn't work out. I also thought about doing a switch statement function in which is triggered by onChange on each input. What do you guys think, can you help me out with the solutions?

Either way thank you for your help and time, much appreciated!

Edited December 11, 2013 by GumbiRo

[dalecosp]

Hmm. Not bad thoughts. A few points:

 

1. Disabling a form control could cause them to think the page is broken and leave. Better might be

to simply have JS check the form fields and return false (plus an appropriate error message) when a field doesn't meet requirements.

 

2. Username/email check --- good. If you can accomplish this via JS and Ajax, that's industry-standard these days. Failing that, there's nothing *particularly* wrong with doing it only afterwards. You must do it at some point.

 

3. PHP now has filter_input() functions, so you might not have to write so many regexp checks:

 

<?php

if (!filter_input($_POST['email'],FILTER_VALIDATE_EMAIL) {
//the email isn't valid
my_bad_email_foo();
}

 

4. Password verification: what do you mean ... enforce a specific policy? That's a good idea.

 

The advice Internet has given me is to do validations server side and not browser side because if security.

This is both right and wrong. Best practice: do both; Javascript on client for user-friendliness and PHP on server-side because of "user UNfriendliness" ;)

 

 

One comment on your JS:

 

var validate_name = document.getElementById("username");

I'm pretty sure you want the VALUE, not the HTML form object. Try:

 

var validate_name = document.getElementById("username").value;

[GumbiRo]

Hmm. Not bad thoughts. A few points:

 

1. Disabling a form control could cause them to think the page is broken and leave. Better might be

to simply have JS check the form fields and return false (plus an appropriate error message) when a field doesn't meet requirements.

 

Ok, would you apply the JS i showed to solve this? I would like to add an image depending on whether the users input is valid or not. (Showing a tick as valid or an X as invalid next to the input.) (as default an X) but for now I have no clue whatsoever 

 

 

 

2. Username/email check --- good. If you can accomplish this via JS and Ajax, that's industry-standard these days. Failing that, there's nothing *particularly* wrong with doing it only afterwards. You must do it at some point.

 

I haven't got  my hands into Ajax, so I guess there's a roadblock. Any tips/tutorials on how I could solve this?(Im not that trustful on JS accessing the databases if thats where you're going with this, I guess it could be harmful?

 

 

 

 

3. PHP now has filter_input() functions, so you might not have to write so many regexp checks:

 

<?php

if (!filter_input($_POST['email'],FILTER_VALIDATE_EMAIL) {
//the email isn't valid
my_bad_email_foo();
}

 

my_bad_email_foo() would be the function that sends the 'X' next to the input and a small message.(which im clueless on how to add the image for the friendlyness...)

 

 

 

 

 

4. Password verification: what do you mean ... enforce a specific policy? That's a good idea. 

 

Sorry for the lack of explanation on this one haha, I guess I solved this on my own JS (check if the password matches the second one, but now that you mention it, making the user use letters & numbers ain't a bad idea to implement.

 

 

**Thanks for the correction I missed that one.

 

 

 

 

 

 

 

Edited December 11, 2013 by GumbiRo