9.7.5 Validations

Validation is an important piece from the moment there is an exchange of information between a user and system. Nowadays, validation can either take place on the server side or on the client-side or both. The preferred - and more robust - way is to validate on both ends.

Server-Side Validation

Caligrafy provides a robust server-side validation with a flexible way of formatting the response to be sent back to the client.

Learn more about Caligrafy validation here

In Caligrafy, validation typically takes place in the Controller. This is an example of how the response can be formatted to be consumed by the client:

// Input validation
$validate = $this->validator->check($parameters, array('title' => 'required|alpha|max_len, 18',
                                                       'short_description' => 'required|max_len, 200',
                                                       'category' => 'required|alpha',
                                                       'description' => 'required',
                                                       'image_url' = 'required_file|extension,png;jpg;gif;jpeg;svg'
                                                       ));
        
// invalid inputs
if ($validate !== true) {
   return api(array('error' => true, 'status' => 'danger', 'message_header' => 'Whoooops, something went wrong', 'message' => 'Some of the inputs are invalid. Make sure all the required inputs are entered properly', 'errors' => $validate, 'projects' => $userInput));
   exit;
}

When the api() method is called for returning a response to the client, you can send any information back. All the information sent back can be retrieved by Vue in the response variable and used accordingly in the markup:

<template v-if="error">
         <p>
            {{ error.message_header }}
         </p>
         <p>{{ error.message }}</p>
    </div>
</template>

Client-Side Validation

Vue and Javascript provide ways to do basic input format validations directly on the forms before the input is sent to the server.

Learn more about Vue Form Validations here

Next Section: Components