Utilisation de l'API JavaScript pour les champs en lecture seule

Souhaitez-vous contrôler les champs en lecture seule dans WPForms en utilisant JavaScript ?
WPForms fournit un ensemble de méthodes JavaScript qui vous permettent de verrouiller, déverrouiller et basculer les champs du formulaire directement sur le frontend. Ces fonctions sont utiles si vous souhaitez ajouter une logique personnalisée, telle que la désactivation des champs après la soumission ou la mise en lecture seule de certains champs en fonction des actions de l'utilisateur.

Ajouter votre JavaScript personnalisé

Pour utiliser ces méthodes, vous devez ajouter un code JavaScript personnalisé à votre site. Si vous ne savez pas comment ajouter du code personnalisé, veuillez consulter notre guide sur l'ajout de JavaScript personnalisé pour WPForms.

Assurez-vous que votre code s'exécute après le chargement de WPForms en le plaçant à l'intérieur de la balise wpformsReady événement.

Méthodes disponibles

Les méthodes suivantes sont disponibles à l'intérieur du wpforms.field objet.

wpforms.field.lock( formId, fieldId )

Verrouille un champ spécifique pour que les utilisateurs puissent le voir mais pas le modifier.

jQuery(document).on('wpformsReady', function() {
    wpforms.field.lock(123, 5);
});

wpforms.field.unlock( formId, fieldId )

Supprime l'état de lecture seule d'un champ spécifique.

jQuery(document).on('wpformsReady', function() {
    wpforms.field.unlock(123, 5);
});

wpforms.field.toggle( formId, fieldId, state )

Bascule l'état de lecture seule d'un champ.

• true - verrouille le champ
• false - déverrouiller le champ
• auto" (par défaut) - commutation automatique en fonction de l'état actuel

// With explicit state
wpforms.field.toggle(123, 5, true);

// With default behavior ('auto')
wpforms.field.toggle(123, 5);

wpforms.field.isLocked( formId, fieldId )

Vérifie si un champ est actuellement verrouillé. Renvoie un booléen.

jQuery(document).on('wpformsReady', function() {
    if ( wpforms.field.isLocked(123, 5) ) {
        console.log('Field is locked');
    }
});

wpforms.field.lockAll( formId )

Verrouille tous les champs d'un formulaire.

jQuery(document).on('wpformsReady', function() {
    wpforms.field.lockAll(123);
});

wpforms.field.unlockAll( formId )

Déverrouille tous les champs d'un formulaire.

jQuery(document).on('wpformsReady', function() {
    wpforms.field.unlockAll(123);
});

wpforms.field.readOnlyClass

Renvoie le nom de la classe CSS appliquée lorsqu'un champ est en lecture seule.

console.log( wpforms.field.readOnlyClass ) ;
// "wpforms-field-readonly" (champ à lecture seule)

Notes

• Remplacer 123 avec votre numéro d'identification du formulaire et 5 avec l'identifiant du champ que vous souhaitez cibler.
• Utilisez toujours le wpformsReady pour s'assurer que les méthodes sont disponibles.
• Ces méthodes ne fonctionnent que sur le frontend - elles n'affectent pas le constructeur de formulaires ou les entrées sauvegardées.