Usando a API JavaScript para campos somente leitura

Gostaria de controlar campos somente leitura no WPForms usando JavaScript?
O WPForms fornece um conjunto de métodos JavaScript que permitem bloquear, desbloquear e alternar campos de formulário diretamente no frontend. Essas funções são úteis se você quiser adicionar lógica personalizada, como desativar campos após o envio ou tornar determinados campos somente leitura com base nas ações do usuário.

Adicionando seu JavaScript personalizado

Para usar esses métodos, é necessário adicionar um snippet de JavaScript personalizado ao seu site. Se não tiver certeza de como adicionar código personalizado, consulte nosso guia sobre como adicionar JavaScript personalizado para WPForms.

Certifique-se de que seu código seja executado após o carregamento do WPForms, envolvendo-o dentro do wpformsReady evento.

Métodos disponíveis

Os seguintes métodos estão disponíveis dentro do wpforms.field objeto.

wpforms.field.lock( formId, fieldId )

Bloqueia um campo específico para que os utilizadores o possam ver mas não o possam editar.

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

wpforms.field.unlock( formId, fieldId )

Remove o estado só de leitura de um campo específico.

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

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

Alterna o estado só de leitura de um campo.

  • verdadeiro - bloqueia o campo
  • false - desbloquear o campo
  • 'auto' (predefinição) - mudar automaticamente consoante o estado atual
// With explicit state
wpforms.field.toggle(123, 5, true);

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

wpforms.field.isLocked( formId, fieldId )

Verifica se um campo está atualmente bloqueado. Retorna um booleano.

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

wpforms.field.lockAll( formId )

Bloqueia todos os campos de um formulário.

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

wpforms.field.unlockAll( formId )

Desbloqueia todos os campos de um formulário.

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

wpforms.field.readOnlyClass

Devolve o nome da classe CSS aplicada quando um campo é só de leitura.

console.log( wpforms.field.readOnlyClass );
// 'wpforms-field-readonly'

Notas

  • Substituir 123 com o seu ID de formulário e 5 com o ID do campo que pretende visar.
  • Utilizar sempre o wpformsReady para garantir que os métodos estão disponíveis.
  • Estes métodos funcionam apenas no frontend - não afectam o construtor de formulários nem as entradas guardadas.