Laravel Jsvalidation Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require proengsoft/laravel-jsvalidation
   

   Publish the config (if needed):

   php artisan vendor:publish --provider="Proengsoft\JsValidation\JsValidationServiceProvider"
   

2. Include Dependencies: Add jQuery and Bootstrap JS to your layout (or use a CDN):

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   

3. Load the Package JS:

   <script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
   

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

   {!! JsValidator::formRequest('App\Http\Requests\StoreUserRequest') !!}
   

   Ensure your StoreUserRequest extends Illuminate\Foundation\Http\FormRequest and defines rules in rules().

Implementation Patterns

Core Workflows

1. FormRequest Validation (Recommended)

   • Define rules in a FormRequest (e.g., StorePostRequest):

     public function rules()
     {
         return [
             'title' => 'required|string|max:255',
             'content' => 'required|string',
             'published_at' => 'nullable|date',
         ];
     }
     

   • Render in Blade:

     {!! JsValidator::formRequest('App\Http\Requests\StorePostRequest') !!}
     

   • Pro Tip: Use validate() in your controller to ensure server-side consistency.

2. Manual Rule Validation For forms not tied to a FormRequest, use JsValidator::make():

   {!! JsValidator::make($request->all(), [
       'email' => 'required|email',
       'password' => 'required|min:8',
   ]) !!}
   

3. AJAX-Enabled Rules Rules like unique, exists, or custom rules trigger AJAX calls. Example:

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

   The package auto-generates AJAX endpoints (e.g., /jsvalidation/unique/users/email).

4. Dynamic Forms For dynamic fields (e.g., added via JavaScript), use JsValidator::partial():

   <div id="dynamic-fields">
       <!-- Fields added here -->
   </div>
   <script>
   JsValidator.partial('dynamic-fields', {
       rules: { 'dynamic-field' => 'required|string' }
   });
   </script>
   

Integration Tips

• Laravel Collective: Works seamlessly with @error directives in Blade:

  <x-input name="email" :error="old('email', $errors->first('email'))" />
  

• Vue/React: Use v-model or controlled components. The package attaches validation to name attributes.
• Localization: Validation messages auto-translate via Laravel’s lang/validation.php. Override in your app’s language files.

Gotchas and Tips

Pitfalls

1. Unsupported Rules

   • present and date_format (timezone-specific) are not client-side validated. Handle these server-side.
   • Custom rules must implement passes() and message() for AJAX to work. Example:

     public function passes($attribute, $value)
     {
         return Str::is('admin', $value);
     }
     public function message()
     {
         return 'The :attribute must be "admin".';
     }
     

2. AJAX Endpoint Conflicts

   • Ensure AJAX routes (e.g., /jsvalidation/unique:table,column) don’t conflict with your app’s routes. Use middleware to restrict access:

     Route::middleware(['web', 'auth'])->group(function () {
         // Your routes
     });
     

3. jQuery Dependency

   • The package requires jQuery. If using a modern frontend framework, consider:
     • Wrapping forms in a jQuery-initialized container.
     • Using a lightweight adapter like jquery-validation directly.

4. Dynamic Field Timing

   • Fields added after page load (e.g., via AJAX) won’t auto-validate. Use JsValidator.partial() or manually trigger validation:

     $('#my-form').validate().element('#dynamic-field');
     

Debugging

• Console Errors: Check browser console for Uncaught TypeError (e.g., missing jQuery or malformed rules).
• AJAX Failures: Verify CSRF tokens are included in AJAX requests. Use Laravel’s @csrf directive in forms.
• Rule Mismatches: Compare client-side and server-side rules. Use php artisan jsvalidation:dump-rules to debug.

Extension Points

1. Custom Rule Support Extend the package to support custom rules by implementing Proengsoft\JsValidation\Contracts\Rule:

   class CustomRule extends Rule
   {
       public function getJsValidation()
       {
           return 'function(value) { return value === "custom"; }';
       }
   }
   

2. Override Defaults Customize the jQuery Validation plugin settings in config/jsvalidation.php:

   'jquery_validation' => [
       'rules' => [
           'custom_rule' => 'function(value) { return value.length > 10; }',
       ],
       'messages' => [
           'custom_rule' => 'Must be longer than 10 characters.',
       ],
   ],
   

3. Exclude Fields Skip validation for specific fields by adding data-skip-validation="true" to the input:

   <input name="temp_field" data-skip-validation="true">
   

4. Event Hooks Listen to validation events via JavaScript:

   $(document).on('jsvalidation:validate', function(e, validator) {
       console.log('Validation started:', validator);
   });