Como adicionar o atributo HTML5 'obrigatório' a woocommerce_form_field

Oct 04 2020

Atualmente, estou trabalhando na página de registro do WooCommerce em meu tema WordPress e adicionei um gancho para que os usuários aceitem os Termos e Condições - consulte o código PHP adicionado.

O HTML5 fornece um recurso muito útil para campos de entrada, que é adicionar 'obrigatório' na tag e o novo navegador exibirá automaticamente um aviso. Consegui fazer isso para todos os outros campos de entrada, mas não consigo alterar esse array PHP específico para gerar a <input>tag com o 'required'atributo.

A saída HTML deve ter a seguinte aparência:

<input required type="checkbox" class="input-checkbox woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="privacy_policy_reg" id="privacy_policy_reg" value="1">

No entanto, no momento, a saída produzida com base no código PHP abaixo é:

<input type="checkbox" class="input-checkbox woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" name="privacy_policy_reg" id="privacy_policy_reg" value="1">

Nota: o gancho já tem uma verificação de validação do PHP, mas somente depois que o botão de registro é pressionado, enquanto a verificação do HTML5 funciona instantaneamente. No entanto, quero manter a verificação de validação do PHP caso haja navegadores que não consigam ler a verificação do HTML5.

Alguém poderia gentilmente me ajudar como o código do array PHP precisaria ser alterado para ter a tag para incluir o atributo 'obrigatório'?

Eu aprecio muito qualquer ajuda!

Atenciosamente, David

// CREATE CHECKBOX AND LABEL

add_action( 'woocommerce_register_form', 'bbloomer_add_registration_privacy_policy', 11 );
   
function bbloomer_add_registration_privacy_policy() {
 
woocommerce_form_field( 'privacy_policy_reg', array(
   'type'          => 'checkbox',
   'class'         => array('form-row privacy'),
   'label_class'   => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
   'input_class'   => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
   'required'      => true,
   'label'         => 'I\'ve read and accept the <a href="/privacy-policy">Privacy Policy</a>',
));
  
}
  
// SHOW ERROR AFTER CLICKING SUBMIT BUTTON IF USER HAS NOT CHECKED CHECKBOX
   
add_filter( 'woocommerce_registration_errors', 'bbloomer_validate_privacy_registration', 10, 3 );
  
function bbloomer_validate_privacy_registration( $errors, $username, $email ) { if ( ! is_checkout() ) { if ( ! (int) isset( $_POST['privacy_policy_reg'] ) ) {
        $errors->add( 'privacy_policy_reg_error', __( 'Privacy Policy consent is required!', 'woocommerce' ) ); } } return $errors;
}

ATUALIZAR

  1. De acordo com outra pergunta aqui: Como posso tornar o valor do campo personalizado obrigatório (obrigatório) na página do produto woocommerce ao adicionar um produto que eu já tentei (sem sucesso):
'custom_attributes' => array( 'required' => 'required' ),
  1. Conforme sugestões, já tentei:
required => "required"

required => "required"

Respostas

3 7uc1f3r Oct 04 2020 at 05:38

Se você realmente deseja mudar <input..para <input required.., você pode adicionar o woocommerce_form_field_checkboxgancho de filtro.

O fato é que onde o código HTML é criado

(Este código foi copiado da wc-template-functions.phplinha 2799)

<input type="' . esc_attr( $args['type'] ) . '" class="input-checkbox ' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" name="' . esc_attr( $key ) . '" id="' . esc_attr( $args['id'] ) . '" value="1" ' . checked( $value, 1, false ) . ' /> ' . $args['label'] . $required . '</label>';

existe a opção de adicionar argumentos ao código existente, $argsmas não extra HTMLpara o HTMLpróprio


Portanto, se você adicionar o código abaixo ao código existente, terá a opção de ajustar a HTMLsaída do$field

  • str_replace - Substitua todas as ocorrências da string de pesquisa pela string de substituição
function filter_woocommerce_form_field_checkbox( $field, $key, $args, $value ) { // Based on key if ( $key == 'privacy_policy_reg' ) {
        $field = str_replace( '<input', '<input required', $field );
    }
    
    return $field;
}
add_filter( 'woocommerce_form_field_checkbox', 'filter_woocommerce_form_field_checkbox', 10, 4 );

Relacionado: Como devo alterar a estrutura HTML woocommerce_form_field?