How to add HTML5 'required' attribute to woocommerce_form_field

Question

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

หมายเหตุ: เบ็ดมีการตรวจสอบความถูกต้องของ 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;
}

---

อัปเดต

1. ตามคำถามอื่น ๆ ที่นี่: ฉันจะกำหนดค่าฟิลด์ที่กำหนดเองได้อย่างไร (บังคับ) ในหน้าผลิตภัณฑ์ woocommerce เมื่อเพิ่มผลิตภัณฑ์ที่ฉันได้ลองแล้ว (ไม่สำเร็จ):

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

1. ตามคำแนะนำฉันได้ลองแล้ว:

required => "required"

required => "required"

Answer 1

ถ้าคุณต้องการที่จริงมีการเปลี่ยนแปลง<input..ไป<input required..จากนั้นคุณสามารถเพิ่มwoocommerce_form_field_checkboxเบ็ดกรอง

ความจริงก็คือจุดที่สร้างโค้ด HTML

(รหัสนี้คัดลอกมาจาก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ตัวมันเอง

---

ดังนั้นหากคุณเพิ่มโค้ดด้านล่างลงในโค้ดที่มีอยู่คุณจะมีตัวเลือกในการปรับHTMLเอาต์พุตจากไฟล์$field

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

---

ที่เกี่ยวข้อง: ฉันจะเปลี่ยนโครงสร้าง woocommerce_form_field HTML ได้อย่างไร