如何将 HTML5 'required' 属性添加到 woocommerce_form_field [英] How to add HTML5 'required' attribute to woocommerce_form_field

问题描述

我目前正在我的 WordPress 主题中的 WooCommerce 注册页面上工作，并添加了一个钩子让用户接受条款和;条件 - 查看添加的 PHP 代码.

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

HTML 输出需要如下所示:

但是，目前基于以下 PHP 代码生成的输出是:

注意:钩子已经有一个 PHP 验证检查，但只有在按下注册按钮后，而 HTML5 检查立即生效.尽管如此，我还是想保留 PHP 验证检查，以防浏览器无法读取 HTML5 检查.

任何人都可以帮助我如何修改 PHP 数组代码以使标签包含必需"属性?

非常感谢您的帮助！

最好的，大卫

//创建复选框和标签add_action('woocommerce_register_form', 'bbloomer_add_registration_privacy_policy', 11);函数 bbloomer_add_registration_privacy_policy() {woocommerce_form_field( 'privacy_policy_reg', array('类型' =>'复选框','类' =>数组('表格行隐私')，'label_class' =>数组('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox')，'input_class' =>数组('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox')，'必需' =>真的，'标签' =>'我已阅读并接受 <a href="/privacy-policy">隐私政策</a>',));}//如果用户未选中复选框，则在单击提交按钮后显示错误add_filter( 'woocommerce_registration_errors', 'bbloomer_validate_privacy_registration', 10, 3 );函数 bbloomer_validate_privacy_registration( $errors, $username, $email ) {如果(！is_checkout()){if ( ! (int) isset( $_POST['privacy_policy_reg'] ) ) {$errors->add('privacy_policy_reg_error', __('需要隐私政策同意！', 'woocommerce'));}}返回 $errors;}

---

更新

1. 根据此处的其他问题:如何在添加产品时在woocommerce产品页面中使自定义字段值成为必需(强制)我已经(不成功)尝试过:

<块引用>

'custom_attributes' =>数组('必需' => '必需')，

2. 根据建议，我已经尝试过:

<块引用>

required =>必需"需要 =>必需"

解决方案

如果您确实想将 更改为 然后您可以添加 woocommerce_form_field_checkbox 过滤器钩子.

事实是 HTML代码创建

(此代码复制自 wc-template-functions.php line 2799)

' .$args['label'] .$需要.'</标签>';

存在将参数添加到现有 $args 而不是额外的 HTML 代码到 HTML 本身的选项

---

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

的 HTML 输出

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

function filter_woocommerce_form_field_checkbox( $field, $key, $args, $value ) {//基于key如果 ( $key == 'privacy_policy_reg' ) {$field = str_replace( '

---

相关:我应该如何更改woocommerce_form_field HTML结构?

I'm currently working on the WooCommerce registration page in my WordPress theme and added a hook for users to accept the Terms & Conditions - see PHP code added.

HTML5 provides a super helpful feature for input fields, which is to add 'required' in the tag and new browser will automatically prompt a warning. I have managed to do this for all other input fields, but I'm unable to amend this specific PHP array to output the <input> tag with the 'required' attribute.

The HTML output would need to look like this:

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

However, at the moment the produced output based on the PHP code below is:

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

Note: the hook already has a PHP validation check but only after the register button is pressed, while the HTML5 check works instantly. Nevertheless, I want to keep the PHP validation check in case there are browsers that cannot read the HTML5 check.

Could anyone kindly help me how the PHP array code would need to be amended to have the tag to include the 'required' attribute?

I'd very much appreciate any help!

Best, 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;
}

---

UPDATE

1. As per other question here: How can i make custom field value required ( compulsory ) in woocommerce product page when adding product I have already (unsuccessfully) tried:

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

2. As per suggestions, I have already tried:

required => "required"

required => "required"

解决方案

If you actually want to change <input.. to <input required.. then you can add the woocommerce_form_field_checkbox filter hook.

The fact is that where the HTML code is created

(This code was copied from wc-template-functions.php line 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>';

the option exists to add arguments to the existing $args but not extra HTML code to the HTML itself

---

So if you add the code below to your existing code, you have the option to adjust the HTML output from the $field

• str_replace - Replace all occurrences of the search string with the replacement string

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

---

Related: How should I change the woocommerce_form_field HTML Structure?

这篇关于如何将 HTML5 'required' 属性添加到 woocommerce_form_field的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！