Creating Rule

• Creating Frontend Rule
  • Registering Rule
  • Async Rule
• Creating Backend Rule

#Creating Frontend Rule

You may create your own validation rule by extending Rule class:

import Rule from '@laraform/laraform/src/utils/validation/rules/rule'

export default class extends Rule {
  // ...
}

The class should have a .validate(value) function, which does the validation and returns true or false and also a get message() getter which returns the error message to be used when the field is invalid.

Let's assume we are creating a rule which checks if the user has entered only uppercase letters:

// uppercase.js

import Rule from '@laraform/laraform/src/utils/validation/rules/rule'

export default class Uppercase extends Rule {
  get message() {
    return 'The :attribute should only contain uppercase letters'
  }

  validate(value) {
    return value.toUpperCase(value) === value
  }
}

Great so now we have our validation rule ready to use. Let's see how we can put it into action.

The simplest way to use a validation rule class is to pass it over to the rules array:

import Uppercase from './path/to/uppercase.js'

export default {
  mixins: [Laraform],
  data: () => ({
    schema: {
      shout: {
        type: 'text',
        label: 'Shout here',
        rules: [
          'required',
          Uppercase
        ]
      }
    }
  })
}

Now when the user types a letter which is not uppercase it will throw it's error.

#Registering Rule

If you want to reuse your rule maybe it's more convenient to register it globally.

To do so simply register it using .rule() method when registering Laraform.

import Vue from 'vue'
import Laraform from '@laraform/laraform'
import Uppercase from './path/to/uppercase'

Laraform.rule('uppercase', Uppercase)

Vue.use(Laraform)

const app = new Vue({
  el: '#app'
})

From this on, uppercase rule is available globally and you can access it like a regular validator:

export default {
  mixins: [Laraform],
  data: () => ({
    schema: {
      shout: {
        type: 'text',
        label: 'Shout here',
        rules: [
          'required',
          'uppercase'
        ]
      }
    }
  })
}

The same technique can be used to override existing validators.

Registering Rule Message

If you are registering a rule globally you might decide to remove it's get message() getter and rely on the locale to provide it's message. In this case you have to take care of adding the message tag to the locale:

import Vue from 'vue'
import Laraform from '@laraform/laraform'
import Uppercase from './path/to/uppercase'

// Registering rule
Laraform.rule('uppercase', Uppercase)

// Registering rule message to `en` locale
Laraform.tag('en_US.validators.uppercase', 'The :attribute should only contain uppercase letters')

Vue.use(Laraform)

const app = new Vue({
  el: '#app'
})

// uppercase.js

import Rule from '@laraform/laraform/src/utils/validation/rules/rule'

export default class Uppercase extends Rule {
  validate(value) {
    return value.toUpperCase(value) === value
  }
}

#Async Rule

Rules might have asynchronous processes like submitting a HTTP request. In order to implement that you must define a get async() getter which returns true. Then you can use async/await promise for the validate() method to do the validation asyncronously.

import Rule from '@laraform/laraform/src/utils/validation/rules/rule'

export default class Remote extends Rule {
  get async() {
    return true
  }

  async validate(value) {
    var response = await axios.get('/endpoint-to-check?value=' + value)

    return response.data.valid
  }
}

#Creating Backend Rule

To create a backend validation rule you can rely on Laravel's documentation.

Say we create the same uppercase rule as in our previous examploe on the backend at app/Rules/Uppercase.php:

<?php

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class Uppercase implements Rule
{
    /**
     * Determine if the validation rule passes.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @return bool
     */
    public function passes($attribute, $value)
    {
        return strtoupper($value) === $value;
    }

    /**
     * Get the validation error message.
     *
     * @return string
     */
    public function message()
    {
        return 'The :attribute must be uppercase.';
    }
}

Then we can use this custom backend rule by separating frontend and backend rules and referencing the rule class directly:

<?php

namespace App\Forms;

use App\Rules\Uppercase;

class ValidationForm extends \Laraform
{
  public function schema() {
    return [
      'shout' => [
        'type' => 'text',
        'label' => 'Shout here',
        'rules' => [
          // Using 'uppercase' frontend rule from previous example
          'frontend' => ['required', 'uppercase'],

          // Using our custom backend Uppercase rule
          'backend' => ['required', new Uppercase],
        ]
      ]
    ]
  }
}