dsfr_phone_field

Génère un champ de saisie de téléphone <input type="tel"> au DSFR.

Documentation DSFR - Champ de saisie

Usage basique

<%= f.dsfr_phone_field :phone %>

<div class="fr-input-group">
  <label class="fr-label" for="usage-basique_phone">Numéro de téléphone</label>
  <input class="fr-input" type="tel" name="usage-basique[phone]" id="usage-basique_phone" />
</div>

Options disponibles

Les mêmes options que dsfr_text_field sont disponibles.

Avec texte d'aide

<%= f.dsfr_phone_field :phone, hint: "06 12 34 56 78" %>

<div class="fr-input-group">
  <label class="fr-label" for="hint_phone">Numéro de téléphone<span class="fr-hint-text">06 12 34 56 78</span></label>
  <input class="fr-input" type="tel" name="hint[phone]" id="hint_phone" />
</div>

Champ en erreur

Affiche le champ avec un message d'erreur lorsque le modèle contient des erreurs de validation.

Numéro de téléphone Ce champ est obligatoireNuméro de téléphone Le numéro de téléphone n'est pas valide

<%= f.dsfr_phone_field :phone %>

<div class="fr-input-group fr-input-group--error">
  <div class="field_with_errors">
    <label class="fr-label" for="erreur_phone">Numéro de téléphone</label>
  </div>
  <div class="field_with_errors">
    <input class="fr-input" type="tel" name="erreur[phone]" id="erreur_phone" />
  </div>
  <p class="fr-messages-group">
    <span class="fr-message fr-message--error">Numéro de téléphone Ce champ est obligatoire</span>
    <span class="fr-message fr-message--error">Numéro de téléphone Le numéro de téléphone n'est pas valide</span>
  </p>
</div>