php - How to add HTML5 'required' attribute to woocommerce_form_field
Get the solution ↓↓↓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
- 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' ),
- As per suggestions, I have already tried:
required => "required" required => "required"
Answer
Solution:
If you actually want to change<input..
to<input required..
then you can add thewoocommerce_form_field_checkbox
filter hook.
The fact is that where the HTML code is created
(This code was copied from 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 extraHTML
code to theHTML
itself
So if you add the code below to your existing code, you have the option to adjust theHTML
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?
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: call to a member function format() on string
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.