Back end validation as front end validation

Question

I am trying to use the back end validation for front end validation and this is what I got. Maybe there is a better way to do this? If someone knows please share the knowledge.

HTML:

<form id="post-store-form" action="posts/store" method="POST">
    <div class="form">
        <input id="post-title" type="text" name="title" class="form-control" placeholder="Title">
        <br>
        <textarea id="post-content" name="content"></textarea>
        <hr>
        <input type="submit" value="Save" class="btn btn-primary btn-block">
    </div>
</form>
<p id="ajax-response"></p>

JS:

$('#post-store-form').submit( function(e) {

    if (!isValid()) {
        e.preventDefault();
    }
});

function isValid() {

    var formIsValid = false;
    var fields = jQuery.param({
        title: $('#post-title').val(),
        content: $('#post-content').val()
    });

    $.ajax({
        async: false,
        type: "POST",
        url: "/posts/store",
        data: fields,
        dataType: 'json',
        success: function(){
            formIsValid = true;
        },
        error: function(result) {
            var messages = [];

            $.each(result.responseJSON.errors, function( index, value ) {
                messages.push('<br>' + value);
            });

            bootbox.alert("<strong class='text-danger'>" + messages + "</strong>");
        }
    });

    return formIsValid;
}

PHP Controller:

public function postStore()
{
    $headers = apache_request_headers();
    $is_ajax = (isset($headers['X-Requested-With']) && $headers['X-Requested-With'] == 'XMLHttpRequest');

    $parameters = $this->formParams;
    $validationRules = [
        'title'     => 'required|alnum',
        'content'   => 'required',
    ];

    // if validation fails return back with error messages
    if ($this->validatorFails($parameters, $validationRules)) {
        if ($is_ajax) {
            $errors = $this->getValidatorErrors($validationRules);
            http_response_code(422);
            echo json_encode(['errors' => $errors]);
            die;
        }
    }

    // if no errors and ajax, return 200
    if ($is_ajax) {
        http_response_code(200);
        echo json_encode([]);
        die;
    }

    // create new user in DB
    $this->createPostFromParams($parameters);

    Session::put('success', 'Successfully created a post.');

    return redirect('posts');
}

Is there a better way to integrate the backend validation to be also the front end validation?

Answer 1

You should separate it in different functions. Here is how you can have validation in different functions and use it in both places - for creating posts and for front-end validation. Besides you should extract this validation logic elsewhere, it's bad to put such logic in your controller.

public function postValidateStore()
{

    $requestValidation = $this->validateStore();

    if($requestValidation !== true){

       die($requestValidation);
    }

    die(json_encode(['success' => 1]));

}


/**
 * @return mixed
 */
public function postStore()
{

    $requestValidation = $this->validateStore();

    if($requestValidation === true){

        // create new user in DB
        $this->createPostFromParams($this->formParams);

        Session::put('success', 'Successfully created a post.');

    } else {

        Session::put('failure', 'Error creating post.');
    }

    return redirect('posts');
}

/**
 * @return bool|false|string
 */
private function validateStore()
{

    $parameters = $this->formParams;
    $validationRules = [
        'title'     => 'required|alnum',
        'content'   => 'required',
    ];

    // if validation fails return back with error messages
    if ($this->validatorFails($parameters, $validationRules)) {

        return json_encode(['errors' => $this->getValidatorErrors($validationRules)]);
    }

    return true;
}

---

function isValid() {

var formIsValid = false;
var fields = jQuery.param({
title: $('#post-title').val(),
content: $('#post-content').val()
});

$.ajax({
    async: false,
    type: "POST",
    url: "/posts/ValidateStore",
    data: fields,
    dataType: 'json',
    success: function(result){


        if(typeof result.success == "undefined"){

            var messages = [];

            $.each(result.errors, function( index, value ) {
                messages.push('<br>' + value);
            });

            bootbox.alert("<strong class='text-danger'>" + messages + "</strong>");

        } else {

            formIsValid = true;
        }

    }

});

return formIsValid;
}