如何将 HTML5 'required' 属性添加到 woocommerce_form_field

Question

我目前正在我的 WordPress 主题中的 WooCommerce 注册页面上工作，并为用户添加了一个挂钩以接受条款和条件 - 请参阅 PHP 添加的代码。

HTML5 为输入框提供了一个超级有用的功能，就是在标签中添加'required'，新浏览器会自动提示警告。我已设法为所有其他输入字段执行此操作，但我无法修改此特定 PHP 数组以输出具有 'required' 属性的 <input> 标记。

HTML 输出需要如下所示：

<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">

但是，目前根据下面的 PHP 代码生成的输出是：

<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">

注意：挂钩已经有一个 PHP 验证检查，但只有在按下注册按钮之后，而 HTML5 检查立即生效。不过，我想保留 PHP 验证检查，以防浏览器无法读取 HTML5 检查。

任何人都可以帮助我如何修改 PHP 数组代码以使标签包含 'required' 属性？

非常感谢任何帮助！

最好的，大卫

// 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;
}

更新

根据此处的其他问题：How can i make custom field value required ( compulsory ) in woocommerce product page when adding product 我已经（未成功）尝试过：

'custom_attributes' => array( 'required' => 'required' ),

按照建议，我已经试过了：

required => "required"

required => "required"

Answer 1

如果您真的想将 <input.. 更改为 <input required..，那么您可以添加 woocommerce_form_field_checkbox 过滤器挂钩。

事实是 HTML code is created

（此代码复制自 wc-template-functions.php 第 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>';

存在向现有 $args 添加参数但不向 HTML 本身添加额外 HTML 代码的选项

因此，如果您将下面的代码添加到现有代码中，您可以选择调整 $field

的 HTML 输出

str_replace - 用替换字符串替换所有出现的搜索字符串

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 );

如何将 HTML5 'required' 属性添加到 woocommerce_form_field

How to add HTML5 'required' attribute to woocommerce_form_field

php

wordpress

woocommerce

custom-fields

required