forms: use type=tel for phone number input (#41077)

tests/test_widgets.py

@@ -655,6 +655,32 @@ def test_wcsextrastringwidget_builtin_validation():
     assert widget.has_error()
 
 
+def test_wcsextrastringwidget_phone_fr():
+    class FakeField:
+        pass
+    fakefield = FakeField()
+
+    # check validation
+    fakefield.validation = {'type': 'phone-fr'}
+    widget = WcsExtraStringWidget('test', value='foo', required=False)
+    widget.field = fakefield
+    mock_form_submission(req, widget, {'test': '0123456789'})
+    assert not widget.has_error()
+
+    widget = WcsExtraStringWidget('test', value='foo', required=False)
+    widget.field = fakefield
+    mock_form_submission(req, widget, {'test': 'az'})
+    assert widget.has_error()
+
+    widget = WcsExtraStringWidget('test', value='foo', required=False)
+    widget.field = fakefield
+    mock_form_submission(req, widget, {'test': '0123'})
+    assert widget.has_error()
+
+    # and check it gets a special HTML input type
+    assert 'type="tel"' in str(widget.render())
+
+
 def test_wcsextrastringwidget_siren_validation():
     class FakeField: pass
     fakefield = FakeField()

wcs/qommon/form.py

@@ -889,7 +889,7 @@ class ValidationCondition(Condition):
 class ValidationWidget(CompositeWidget):
     validation_methods = collections.OrderedDict([
         ('digits', {'title': N_('Digits'), 'regex': '\d+'}),
-        ('phone-fr', {'title': N_('Phone Number (France)'), 'regex': '0[\d\.\s]{9}'}),
+        ('phone-fr', {'title': N_('Phone Number (France)'), 'regex': '0[\d\.\s]{9}', 'html_input_type': 'tel'}),
         ('zipcode-fr', {'title': N_('Zip Code (France)'), 'regex': '\d{5}'}),
         ('siren-fr', {'title': N_('SIREN Code (France)'), 'function': 'validate_siren'}),
         ('siret-fr', {'title': N_('SIRET Code (France)'), 'function': 'validate_siret'}),
@@ -967,6 +967,13 @@ class ValidationWidget(CompositeWidget):
             return validation.get('value')
         return None
 
+    @classmethod
+    def get_html_input_type(cls, validation):
+        validation_method = cls.validation_methods.get(validation['type'])
+        if validation_method and validation_method.get('html_input_type'):
+            return validation_method.get('html_input_type')
+        return 'text'
+
 
 class WcsExtraStringWidget(StringWidget):
     field = None
@@ -977,6 +984,11 @@ class WcsExtraStringWidget(StringWidget):
         if self.prefill_attributes and 'geolocation' in self.prefill_attributes:
             get_response().add_javascript(['qommon.geolocation.js'])
 
+    def render_content(self):
+        if self.field and self.field.validation:
+            self.HTML_TYPE = ValidationWidget.get_html_input_type(self.field.validation)
+        return super(WcsExtraStringWidget, self).render_content()
+
     def _parse(self, request):
         StringWidget._parse(self, request)
         if self.field and self.field.validation and self.value is not None: