Scroll page back to the top

Two layered form validation

Two layered form validation

In this tutorial you will learn how to apply two layers of validation to your online form. First layer is the client based javascript validation and the second one - server site validation. Using this approach we are saving the use of the bandwidth and number of calls made to the server.

Time: 55:55 min / Price: £26.00

Sebastian Sulinski on 6th Sep 2011

Add to the basket
 

Introduction

Watch now!

Find out what we're going to be creating (02:40 min)

 

Client side validation

Watch now!

Form structure (05:49 min)

 
Watch now!

Radio and checkbox (03:42 min)

 
Watch now!

Javascript form object (06:07 min)

 
Watch now!

Initial validation method (03:59 min)

 
Watch now!

Checkbox validation (04:08 min)

 
Watch now!

Radio button validation (03:44 min)

 
Watch now!

Other form elements (01:55 min)

 
Watch now!

Email validation (03:56 min)

 
Watch now!

Password validation (03:31 min)

 

Server side validation

Watch now!

Ajax call (02:30 min)

 
Watch now!

Display response validation (02:29 min)

 
Watch now!

Expected and required arrays (03:54 min)

 
Watch now!

Email validation (01:59 min)

 
Watch now!

Password validation (01:59 min)

 
Watch now!

Required and errors (05:01 min)

 
Watch now!

Testing (02:32 min)

 
 
 
 

Discussion (10 comments)

  • Qaysar Akbar

    Qaysar Akbar on Sunday, 13th November 2011

    Hi Sebastian,
    Can you please advise if these tutorials are in OOP or normal PHP?
    Apart from the Introduction their are no other feature tutorials to view to understand the concept and language used Unlike your other tutorials.
    Thank You
    Qaysar

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Sunday, 13th November 2011

    Hi Qaysar,
    Yes - this tutorial uses OOP approach both for PHP and JavaScript.

    Reply

  • Qaysar Akbar

    Qaysar Akbar on Wednesday, 23rd November 2011

    Hi Sebastian,
    Can you please advise if the code structure for this tutorial is the same as the E-Commerce tutorials registration system used.
    I am having problems trying to add Ajax functionality to those tutorials where the registration system using Ajax call to check errors and than register or login user.
    Is this tutorial compatible with those tutorials?
    I would in the future like to add JavaScript validation to the E-commerce registration part but for know what to know if the Ajax would be compatible to get users to register or login.
    Thank You

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Thursday, 24th November 2011

    Hi Qaysar,
    The code structure is different than E-commerce as our E-commerce system uses $_POST to process request on the same page by reloading it. This tutorial uses jQuery's Ajax call, however you can easily combine two together and with that create the Ajax based E-commerce login and registration forms.

    Once you've bought it I'll be happy to assist you with the integration.

    Reply

  • Imran Khan

    Imran Khan on Thursday, 8th December 2011

    Hello Sebastian,
    I wanted to ask a few questions regarding this tutorial.
    1) Does the form submit if the user has JQuery turned off?
    2) Does each field validate in individually in PHP like it does in jQuery when users jQuery is switched off?
    Thanks

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Thursday, 8th December 2011

    Hi Imran,
    This tutorial will NOT submit the form with JavaScript turned off as it uses it for the first validation (using JavaScript) and then sends the input to the PHP script - again using JavaScript.

    It validates fields displaying validation message next to each field, but it does NOT validate the field on 'blur', which is when the cursor leaves the field - it validates when the Enter / Return button is clicked of Submit button is pressed.

    I hope this answers your question, but let me know if you need any more information.

    Reply

  • Imran Khan

    Imran Khan on Thursday, 8th December 2011

    Hello Sebastian,
    Thank you for your reply.
    But the second part of the question I asked I'm a bit confused with your answer.
    Maybe I did not explain it properly.
    What I wanted to ask was if the jQuery was switched off how would the error messages be displayed on the form.
    Would the form fields still be validated or would it just throw up a single error message?
    Thanks

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Thursday, 8th December 2011

    If JavaScript is disabled the form will not submit due to the fact that the form is submitting request via Ajax - which is technology that uses JavaScript, and without JavaScript present form will not submit at all.

    Reply

  • Qaysar Akbar

    Qaysar Akbar on Monday, 9th April 2012

    Hi Sebastian,
    I wanted to ask how can two password fields be compared in jQuery and PHP for this tutorial?
    For PHP I have tried:

    if (strcmp($_POST['password'], $_POST['password2']) != 0 ) {
    	$errors[$key] = $required[$key];
    }
    

    But this does not compare the two passwords or display the error
    Thank You

    Reply

  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 10th April 2012

    Hi Qaysar,
    The above will not display the error message because you're passing the $key rather than index of the validation message to the $required array.

    You should instead pass the index like so:

    $errors['password'] = $required['password_not_matched'];
    

    The strcmp function is case sensitive so make sure that when you type the password to both fields they are exactly the same. The function returns < 0 if str1 is less than str2; $gt; 0 if str1 is greater than str2, and 0 if they are equal. So your statement should be ok, although I would use:

    !==
    

    to ensure they are identical - you can read a bit more on operators here: PHP Operators.

    You could also simply compare them like so:

    if ($_POST['password'] !== $_POST['password2']) {
    

    Make sure that before you do - they have some values - as in this case, if both fields are empty then they will still validate so use for instance !empty() function first for each field.

    Reply

 
 
Add a comment
Add Comment