[Vuejs]-Validate on blur or much less

by

0👍

With that library there does not seem to be a blur method, instead you could use a debounce method

debounce is essentially running the validation after the user has stopped changing the value after a certain amount of time in this case, 1 second using the data-vv-delay="1000" attribute.

<div>
    <div class="relative border border-gray-500 rounded-md px-3 py-2 shadow-sm focus-within:ring-1 focus-within:ring-blue-600 focus-within:border-blue-600 ">
        <label for="name" value="Name" class="absolute -top-2 left-2 -mt-px inline-block px-1 bg-gray-900 text-sm font-medium text-gray-50">Username</label>
        <Field
            @keydown.space.prevent
            type="text"
            autocomplete="username"
            name="name"
            id="name"
            v-model="form.name"
            :rules="validateUsername"
            validateOnInput
            required
            autofocus
            class="bg-gray-900 text-white block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm"
            placeholder=""
            data-vv-delay="1000"
        />
    </div>
    <ErrorMessage name="name" class="text-red-500 mt-2" />
</div>

as for the insensitive unique validation you will have to create a new validator.

app/Providers/AppServiceProvider.php


...

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Validator::extend('iunique', function ($attribute, $value, $parameters, $validator) {
            $query = DB::table($parameters[0]);
            $column = $query->getGrammar()->wrap($parameters[1]);
            return ! $query->whereRaw("lower({$column}) = lower(?)", [$value])->count();
        });
    }
...

not 100% on the validation however. got this from the github https://github.com/laravel/framework/issues/9430#issuecomment-274482274

Leave a comment