Add js validate class on square form submit

[Crabcyborg]

We do this for Stripe. This should help to prevent issues with verifying the Square buyer when fields are not filled in.

[coderabbitai]

Walkthrough

Adds a pre-validation step in handlePaymentMethodSubmission to assign the frm_js_validate class to the form before running validateFormSubmit. No other control flow or error handling changes.

Changes

Cohort / File(s)	Summary
Square frontend payment submission square/js/frontend.js	Inserted assignment adding the CSS/state class frm_js_validate to the current form (thisForm) immediately before calling validateFormSubmit. All subsequent logic (validation check, tokenization, verification, payment creation, submit enable/disable, error handling) remains unchanged.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant F as Form (DOM)
  participant H as handlePaymentMethodSubmission
  participant V as validateFormSubmit
  participant T as Tokenization
  participant P as Payment/Verification

  U->>F: Submit
  F->>H: handlePaymentMethodSubmission(event)
  note right of H: New step
  H->>F: Add class "frm_js_validate"
  H->>V: validateFormSubmit(F)
  alt Validation fails
    V-->>H: false
    H-->>F: Re-enable submit / show errors
  else Validation passes
    V-->>H: true
    H->>T: Tokenize payment method
    T-->>H: Token / error
    alt Token OK
      H->>P: Verify/Create payment
      P-->>H: Result
      H-->>F: Continue submission flow
    else Token/Error
      H-->>F: Handle error / re-enable submit
    end
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix CAPTCHA validation issue when using Square #2458 — Also modifies handlePaymentMethodSubmission in square/js/frontend.js, focusing on event handling (removal of event.preventDefault), affecting the same function’s submission flow.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title concisely and accurately summarizes the primary change by stating that a JavaScript validation class is being added on Square form submission, directly reflecting the core code modification described in the pull request.
Description Check	✅ Passed	The description is directly related to the changeset, explaining that the new behavior mirrors Stripe’s implementation to prevent buyer verification issues when form fields are incomplete, which aligns with the addition of the validation class.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch add_js_validate_class_on_square_form_submit

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 71d3531 and c258dde.

📒 Files selected for processing (1)

• square/js/frontend.js (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

square/js/frontend.js (2)

stripe/js/frmstrp.js (1)

• thisForm (2-10)

js/admin/legacy-views.js (1)

• thisForm (5-5)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: PHP 7.4 tests in WP trunk
• GitHub Check: PHP 8 tests in WP trunk
• GitHub Check: Cypress
• GitHub Check: PHP 8 tests in WP trunk
• GitHub Check: Cypress
• GitHub Check: PHP 7.4 tests in WP trunk

🔇 Additional comments (1)

square/js/frontend.js (1)

257-258: Verify Stripe consistency.
I couldn’t find any references to frm_js_validate in the Stripe codebase, so this change may not actually mirror Stripe behavior. Please confirm that Stripe also adds this class before validation and ensure it’s removed after validation completes to avoid stale form state.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🧪 Early access (Sonnet 4.5): enabled

We are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience.

Note:

• Public repositories are always opted into early access features.
• You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}