Custom validation for lead capture form not triggering on mobile devices

CRM HubSpot
, , , , , , , ,
1

Implemented custom JavaScript validation on our lead capture form to ensure data quality. The validation works perfectly on desktop browsers but completely fails on mobile devices. Users can submit invalid data from phones and tablets, which is causing major data quality issues.

Our validation checks phone format and company domain:

document.querySelector('.hs-form').addEventListener('submit', function(e) {
  const phone = document.querySelector('input[name="phone"]').value;
  if (!validatePhone(phone)) {
    e.preventDefault();
  }
});

On desktop this prevents submission correctly. On mobile, the form submits regardless of validation results. Need help with mobile event handling to maintain consistent data quality across all devices.

2

This is a common mobile issue. Touch events sometimes bypass standard event listeners. Also, some mobile browsers aggressively cache form states and can ignore preventDefault() calls. Check if your validation code is even executing on mobile by adding console.log statements and testing with remote debugging tools.

3

The preventDefault might not work reliably on mobile because of timing issues with how mobile browsers handle touch events versus mouse events. Consider using the HTML5 pattern attribute as a fallback for basic validation that works consistently across all devices, then enhance it with JavaScript for more complex rules.

4

We discovered that HubSpot forms on mobile sometimes use AJAX submission that bypasses normal form events. The form appears to submit through a different code path on mobile devices. You might need to hook into HubSpot’s Forms API using the onFormSubmit callback instead of native DOM events. Also test on actual devices, not just browser emulation, because the behavior differs significantly between Chrome DevTools mobile view and real iOS/Android devices.

5

I’ve solved this exact mobile validation issue multiple times. Let me address the three critical areas: mobile event handling differences, proper form validation implementation, and cross-browser testing requirements.

Mobile Event Handling: Mobile browsers handle form submissions through different event pipelines than desktop. Touch interactions trigger different event sequences, and some mobile browsers use native form submission that bypasses JavaScript event listeners. Your addEventListener approach fails because HubSpot forms on mobile use their own submission handler that fires before your event listener.

The solution is to use HubSpot’s Forms API instead of DOM events:

window.addEventListener('message', function(event) {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
    // Validation happens too late here
  }
});

That’s still too late. Use the onBeforeFormSubmit hook:

hbspt.forms.create({
  portalId: 'YOUR_PORTAL_ID',
  formId: 'YOUR_FORM_ID',
  onBeforeFormSubmit: function($form) {
    const phone = $form.find('input[name="phone"]').val();
    if (!validatePhone(phone)) {
      return false; // Prevents submission
    }
  }
});

Form Validation Best Practices: Implement multi-layer validation for data quality. Use HTML5 attributes for basic validation that works everywhere:

<input name="phone" type="tel"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

Then enhance with JavaScript for complex rules. For mobile specifically, validate on blur events too, not just submit:

document.querySelector('input[name="phone"]').addEventListener('blur', function() {
  validatePhone(this.value);
  displayValidationMessage(this);
});

Cross-Browser Testing: Mobile validation requires testing on actual devices, not just emulators. iOS Safari, Chrome Mobile, and Samsung Internet all handle forms differently. Key differences:

  • iOS Safari: Aggressive form autofill interferes with validation
  • Chrome Mobile: Touch events fire in different order than mouse events
  • Samsung Internet: Custom form controls bypass standard validation

Create a testing matrix covering iOS 14+, Android 10+, and major mobile browsers. Use BrowserStack or similar for comprehensive coverage.

Implement feature detection rather than browser detection:

const isTouchDevice = 'ontouchstart' in window;
if (isTouchDevice) {
  // Use touch-optimized validation timing
}

For your specific case, refactor to use HubSpot’s form lifecycle hooks and add HTML5 validation as baseline. Test the validation flow on at least three physical devices before deploying. This ensures consistent data quality regardless of how users access your forms.

Also add server-side validation as ultimate fallback. Client-side validation improves UX but never rely on it solely for data quality. HubSpot workflows can validate and flag bad submissions for cleanup.

6

Check your script loading. Mobile networks are slower and if your validation script loads after the form is already interactive, users can submit before validation is ready. Use async/defer attributes carefully and ensure your validation initializes before HubSpot’s form JavaScript executes.