Server-side form data validation

DESCRIPTION This application shows how to validate on the server-side the data entered in an input form using the Data Validation API.
For illustration purposes, all the fields in the input form are defined with type="text" and without the required attribute for the mandatory fields.

PREREQUISITE The ZnetDK for Mobile Starter Application is installed and configured (go to the Get Started page and follow the given procedure).

STEPS Only four steps are required:

• Step 1: Coding the view that displays the input form,
• Step 2: Coding the controller that processes the form data,
• Step 3: Coding the validator in charge of checking the data entered by the user,
• Step 4: Adding a new item to the App's navigation menu.

DEMONSTRATION See live demo....

Step 1 - Coding the view dataformview.php

The view dataformview.php must be installed into the INSTALL_DIR/applications/default/app/view/ folder.

• The input form id="my-data-form" is declared with the data-zdk-submit attribute to specify the controller and the action to call on form submit.
• All the input fields are declared voluntarily with the type="text" attribute, even for the fields used to input the minimal and maximal numeric values because we want the data to be validated on the server-side.
  Obviously, in a real world input form, the two numeric fields would be preferably declared with the type="number" attribute.
• A red asterisk is added to the Title label via the zdk-required ZnetDK CSS class.
  On the other hand, no required attribute is voluntarily defined for the corresponding input field name="title" as we want to check in PHP on the server-side, that a value is indeed entered.
• Finally, to connect the input form to the remote PHP controller action specified via the the data-zdk-submit attribute, the ZnetDK method znetdkMobile.form.make() is called in JavaScript.
  So, when the submit button is clicked, the data entered in the form are sent in AJAX through POST parameters to the app\controller\FormValidCtrl::action_submit() PHP method described in next chapter.

<form id="my-data-form" class="w3-padding-16" data-zdk-submit="formvalidctrl:submit">
    <label class="zdk-required"><b>Title</b></label><br>
    <input class="w3-input w3-border" type="text" name="title" placeholder="This field is mandatory"><br>
    <label><b>Min. number</b></label><br>
    <input class="w3-input w3-border" type="text" name="min_number" placeholder="Must be the lower value"><br>
    <label><b>Max. number</b></label><br>
    <input class="w3-input w3-border" type="text" name="max_number" placeholder="Must be the higher value"><br>
    <label><b>Other value</b></label><br>
    <input class="w3-input w3-border" type="text" name="other" placeholder="This field is optional"><br>
    <button class="w3-button w3-block w3-green w3-section w3-padding" type="submit"><i class="fa fa-check"></i> Submit</button>
</form>
<script>
    console.log('dataformview.php');
    znetdkMobile.form.make('#my-data-form');
</script>

Step 2 - Coding the controller formvalidctrl.php

The controller formvalidctrl.php must be installed into the INSTALL_DIR/applications/default/app/controller/ folder.

• The custom app\controller\FormValidCtrl class is derived from the \AppController ZnetDK class to be identified as an application controller.
• The action_submit() method, a controller's action, is called on submit of the input form.
  The form data is validated with the help of the \app\validator\FormValidator() custom Validator class described in next chapter.
• If data validation failed, an error message is returned in the response of the HTTP request by calling the \Response::setFailedMessage() method.
• Otherwise if data validation succeeded, then a success message is returned by calling the \Response::setSuccessMessage() method.

<?php
namespace app\controller;

class FormValidCtrl extends \AppController {
    static protected function action_submit() {
        $response = new \Response();
        $validator = new \app\validator\FormValidator();
        $validator->setCheckingMissingValues();
        if (!$validator->validate()) {
            $response->setFailedMessage(NULL, $validator->getErrorMessage(),
                $validator->getErrorVariable());
            return $response;
        }
        $response->setSuccessMessage(NULL, 'Form data checked.');
        return $response;
    }
}

Step 3 - Coding the validator formvalidator.php

The validator formvalidator.php must be installed into the INSTALL_DIR/applications/default/app/validator/ folder.

• The FormValidator custom class is derived from the \Validator ZnetDK class, specialized in data validation.
• The initVariables() must be implemented to indicate as an array, the names of the the POST parameters whose values the validator must check.
• The three other methods declared in the class with their name prefixed by check_ are responsible for validating the value of a particular input field.
  For example, the check_title() method checks the value of the input field named title.
• If the entry field value passed in parameter of the method through the $value variable is correct, then the method returns TRUE.
  Otherwise, if the value is incorrect, the error message to be displayed to the end user is set by calling the Validator::setErrorMessage() method and the value FALSE is returned.
• As shown in the check_max_number() method, the value of the input field named min_number is read by calling the Validator::getValue() method.

<?php
namespace app\validator;

class FormValidator extends \Validator {
    protected function initVariables() {
        return array('title','min_number','max_number');
    }
    protected function check_title($value) {
        if (strlen($value) === 0) {
            $this->setErrorMessage('Title is missing.');
            return FALSE;
        }
        return TRUE;
    }
    protected function check_min_number($value) {
        if (strlen($value) > 0 && !is_numeric($value)) {
            $this->setErrorMessage('Min. number is not a number.');
            return FALSE;
        }
        return TRUE;
    }
    protected function check_max_number($value) {
        if (strlen($value) > 0 && !is_numeric($value)) {
            $this->setErrorMessage('Max. number is not a number.');
            return FALSE;
        }
        if (strlen($value) > 0 && $this->getValue('min_number') >= $value) {
            $this->setErrorMessage('Max. number is not higher than the min. number');
            return FALSE;
        }
        return TRUE;
    }
}

Step 4 - Adding "Data form" item to the navigation menu

Finally, to give users access to the dataformview.php view, the menu's item named Data form is declared into the menu.php script of the Web App (see Get Started | New menu items for more information).

The menu.php script is located into the INSTALL_DIR/applications/default/app/ folder.

static public function initAppMenuItems() {
    
    // ... Here, some menu items...
    
    \MenuManager::addMenuItem(NULL, 'dataformview', 'Data form', 'fa-check-circle-o');
    
    // ... Here, other menu items...
    
}