feat: add client-side JS validation to checkout flow#397
Conversation
Expose PHP validation rules to JavaScript via wp_localize_script so client-side validation stays in sync with server-side rules without duplicating logic (laravel-jsvalidation approach). Changes: - Checkout::get_js_validation_rules() — parses the PHP rule strings (required, email, min, max, alpha_dash, lowercase, same, integer, accepted) into a JS-friendly array; skips server-only rules (unique_site, unique:\WP_User, products, country, state, city) - Checkout::get_checkout_variables() — exposes validation_rules and field_labels to wu_checkout JS object via wp_localize_script - checkout.js validate_client_side() — runs rules client-side before the AJAX call; shows per-field errors instantly via existing Vue get_error() / errors array mechanism - validate_form() — calls validate_client_side() first; only proceeds to AJAX if client-side passes (avoids unnecessary round-trips) - i18n strings for all new validation messages added to PHP and JS Closes #279
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🔨 Build Complete - Ready for Testing!📦 Download Build Artifact (Recommended)Download the zip build, upload to WordPress and test:
🌐 Test in WordPress Playground (Very Experimental)Click the link below to instantly test this PR in your browser - no installation needed! Login credentials: |
1 participant
Summary
wp_localize_script(laravel-jsvalidation approach) so client-side and server-side rules stay in sync without duplicationvalidate_client_side()to the Vue checkout app that runs before the AJAX call, giving instant per-field error feedbackWhat changed
PHP (
inc/checkout/class-checkout.php)get_js_validation_rules()— new method that parses the PHP rule strings (required,email,min:N,max:N,alpha_dash,lowercase,same:field,integer,accepted) into a JS-friendly array; skips server-only rules (unique_site,unique:\WP_User,products,country,state,city)get_checkout_variables()— exposesvalidation_rulesandfield_labelsto thewu_checkoutJS object viawp_localize_scriptJavaScript (
assets/js/checkout.js)validate_client_side(values)— new Vue method that evaluates the exposed rules against current form values; uses the existingerrorsarray andget_error()mechanism for per-field display (no new UI needed)validate_form()— callsvalidate_client_side()first; only proceeds to AJAX if client-side passes, avoiding unnecessary network round-tripsDesign decisions
<span v-if="get_error(...)">per-field error display already present in all field templateswu_checkout_js_validation_rulesfilter lets plugins add/modify rules;wu_checkout_validation_rulesfilter already covers the PHP sidewu_checkout.validation_rulesis absent (e.g. older cached page), the client-side check is a no-op and AJAX validation still runsTesting
Closes #279