https://www.iprogsms.com/assets/controllers/phone_validator_controller-b4f1df49.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="phone-validator"
4export default class extends Controller {
5  static targets = ["input", "error"]
6
7  validatePhone() {
8    const phoneNumber = this.inputTarget.value.trim()
9    const errorTarget = this.hasErrorTarget ? this.errorTarget : null
10    
11    // Philippine mobile number pattern: +63 or 0 followed by 9 and 9 digits
12    const phonePattern = /^(?:\+63|0)9\d{9}$/
13    
14    // Remove any spaces, dashes, or parentheses for validation
15    const cleanPhone = phoneNumber.replace(/[\s\-()]/g, "")
16    
17    if (phoneNumber === "") {
18      this.clearError()
19      this.updateFieldState("")
20      return
21    }
22    
23    if (!phonePattern.test(cleanPhone)) {
24      this.showError("Please enter a valid Philippine mobile number (e.g., +639123456789 or 09123456789)")
25      this.updateFieldState("error")
26    } else {
27      this.clearError()
28      this.updateFieldState("success")
29    }
30  }
31
32  showError(message) {
33    if (this.hasErrorTarget) {
34      this.errorTarget.textContent = message
35      this.errorTarget.classList.remove("hidden")
36    }
37  }
38
39  clearError() {
40    if (this.hasErrorTarget) {
41      this.errorTarget.textContent = ""
42      this.errorTarget.classList.add("hidden")
43    }
44  }
45
46  updateFieldState(state) {
47    const input = this.inputTarget
48    // Remove previous state classes
49    input.classList.remove("border-red-300", "border-green-300", "focus:ring-red-500", "focus:border-red-500", "focus:ring-green-500", "focus:border-green-500")
50    
51    if (state === "error") {
52      input.classList.add("border-red-300", "focus:ring-red-500", "focus:border-red-500")
53    } else if (state === "success") {
54      input.classList.add("border-green-300", "focus:ring-green-500", "focus:border-green-500")
55    }
56  }
57}
58