Laravel Jsvalidation Laravel Package

Getting Started

Minimal Steps

1. Install the Package:

   composer require proengsoft/laravel-jsvalidation
   

   Ensure jquery-validation is included in your project (either via npm or CDN).

2. Publish Assets (if using Laravel Mix/Vite):

   npm install jquery-validation --save
   

   Add to your resources/js/app.js or resources/js/bootstrap.js:

   import 'jquery-validation';
   window.JsValidator = require('jsvalidation');
   

3. Include Scripts in Blade:

   <!-- jQuery (required) -->
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <!-- jQuery Validation Plugin (required) -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation/1.19.3/jquery.validate.min.js"></script>
   <!-- Laravel JsValidation -->
   <script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
   

4. First Use Case: Validate a FormRequest in a blade view:

   <form method="POST" action="/submit">
       @csrf
       <!-- Form fields -->
       <input type="text" name="email">
   </form>
   
   <!-- Auto-generate JS validation -->
   {!! JsValidator::formRequest('App\Http\Requests\StoreUserRequest') !!}
   

Implementation Patterns

Core Workflows

1. FormRequest Validation (Recommended)

   • Define validation rules in a FormRequest (e.g., StoreUserRequest).
   • Use JsValidator::formRequest() in your blade template to auto-generate client-side validation.
   • Example:

     // app/Http/Requests/StoreUserRequest.php
     public function rules() {
         return [
             'email' => 'required|email|unique:users',
             'password' => 'required|min:8',
         ];
     }
     

     <!-- Blade -->
     {!! JsValidator::formRequest('App\Http\Requests\StoreUserRequest') !!}
     

2. Manual Rule Validation

   • For ad-hoc validation, use JsValidator::make() with an array of rules:

     {!! JsValidator::make([
         'email' => 'required|email',
         'password' => 'required|min:8',
     ], ['email' => 'The email field is required.']) !!}
     

3. AJAX Validation for Dynamic Rules

   • Rules like unique, exists, or custom rules trigger AJAX calls to Laravel.
   • Configure AJAX endpoints in config/jsvalidation.php:

     'ajax' => [
         'unique' => '/api/check-unique',
         'exists' => '/api/check-exists',
     ],
     

4. Integration with Laravel Collective

   • Works seamlessly with @error directives and Form::open():

     {!! Form::open(['id' => 'my-form']) !!}
         {!! JsValidator::formRequest('App\Http\Requests\StoreUserRequest') !!}
     {!! Form::close() !!}
     

Advanced Patterns

1. Custom Rule Support

   • Extend JsValidator to support custom rules by implementing JsValidatorRule:

     JsValidator::extend('custom_rule', function ($field, $parameters, $validator) {
         return "function(element, parameters, value) {
             return value === 'custom';
         }";
     });
     

2. Dynamic Form Handling

   • Use JsValidator::partial() for dynamically loaded forms (e.g., modals):

     {!! JsValidator::partial('App\Http\Requests\UpdateUserRequest', 'update-form') !!}
     

3. Localization

   • Leverage Laravel’s localization system. Messages auto-translate based on app()->getLocale().
   • Override translations in resources/lang/{locale}/validation.php.

4. Conditional Validation

   • Use Laravel’s sometimes or required_if rules in FormRequest:

     public function rules() {
         return [
             'password' => ['required_if' => 'update_password', 'min:8'],
         ];
     }
     

Gotchas and Tips

Pitfalls

1. Unsupported Rules

   • Rules like present, date_format (with timezones), or confirmed may not work client-side.
   • Workaround: Use server-side validation or custom JS for these cases.

2. AJAX Rule Failures

   • Rules like unique or exists require AJAX endpoints. If misconfigured, validation fails silently.
   • Debug Tip: Check browser console for 404 errors on /api/check-unique routes.

3. jQuery Dependency

   • The package relies on jQuery. If missing, validation breaks.
   • Fix: Ensure jQuery is loaded before jsvalidation.js.

4. FormRequest Caching

   • Laravel caches FormRequest classes. Clear cache (php artisan cache:clear) if rules change but JS validation doesn’t update.

5. Date Comparison Issues

   • Rules like before:today or after:yesterday may fail in JS due to date parsing quirks.
   • Fix: Use ISO format (YYYY-MM-DD) or extend the rule with custom JS logic.

Debugging Tips

1. Inspect Generated JS

   • Open browser dev tools (F12) and check the <script> tag generated by JsValidator::formRequest(). Look for malformed rules or missing fields.

2. Disable AJAX for Testing

   • Temporarily disable AJAX in config/jsvalidation.php:

     'ajax' => false,
     

   • Useful for debugging server-side issues without AJAX.

3. Log Validation Errors

   • Add this to your FormRequest to log client-side errors:

     public function failedValidation(Validator $validator) {
         \Log::error('Validation errors:', $validator->errors()->toArray());
     }
     

4. Check for Conflicting JS

   • Ensure no other JS libraries (e.g., Bootstrap’s JS) are overriding jQuery’s $.validator methods.

Extension Points

1. Custom Rule Templates

   • Override the default rule templates in resources/views/vendor/jsvalidation/.
   • Example: Create resources/views/vendor/jsvalidation/rules/custom_rule.js:

     function(element, parameters, value) {
         return value.match(/^custom_/);
     }
     

2. Modify AJAX Responses

   • Extend the AJAX handler in app/Providers/AppServiceProvider.php:

     use Proengsoft\JsValidation\JsValidator;
     
     public function boot() {
         JsValidator::ajaxHandler(function ($request) {
             return response()->json([
                 'valid' => true,
                 'message' => 'Custom response',
             ]);
         });
     }
     

3. Disable Default Messages

   • Set config/jsvalidation.php:

     'messages' => false,
     

   • Use custom messages via JsValidator::make() or override translations.

4. Integrate with Alpine.js/Vue

   • Use JsValidator::partial() for dynamic components:

     <template x-data="{ open: false }">
         <div x-show="open">
             <form x-ref="dynamicForm">
                 {!! JsValidator::partial('App\Http\Requests\DynamicRequest', 'dynamicForm') !!}
             </form>
         </div>
     </template>