laceyrod
(@laceyrod)
Automattic Happiness Engineer
Hi there,
Thanks for reaching out.
This would require more complex development. I’ll go ahead and leave this thread open for a while in case anyone else wants to chime in, but in the meantime, I can also recommend the following resources for more development-oriented questions:
– WooCommerce Slack Community: https://woocommerce.com/community-slack/
– Advanced WooCommerce group on Facebook: https://www.facebook.com/groups/advanced.woocommerce/
Also, perhaps this resource may help: https://stackoverflow.com/questions/18770369/how-to-set-html5-required-attribute-in-javascript
Thanks!
Hi,
Thanks. Interesting article but the the HTML5 ‘required’ attribute does not do anything when added to the field. It still gets submitted. I imagine that WooCommerce submits the order by AJAX and validation takes place server side.
I am looking for the same answer – how to set/unset the required attribute. I found an example that claims to do this:
https://stackoverflow.com/questions/55206672/make-woocommerce-checkout-phone-field-optional-based-on-shipping-country/55209546#55209546
The core of this is the function:
function actionRequire( actionToDo=’yes’, selector=” ){
if ( actionToDo == ‘yes’ ) {
$(selector).addClass(“validate-required”);
$(selector+’ label > .required’).remove();
$(selector+’ label’).append(required);
} else {
$(selector).removeClass(“validate-required”);
$(selector+’ label > .required’).remove();
}
$(selector).removeClass(“woocommerce-validated”);
$(selector).removeClass(“woocommerce-invalid woocommerce-invalid-required-field”);
}
I have tried this and the field label has the required “*” removed but this appears to be cosmetic and the reemoveClass did not actually make the field un-required in my tests.
So I am still looking for how to change the required attribute dynamically.
Hi Dirk,
I never got WooCommerce to obey the ‘required’ attribute so had to custom do it with jQuery. It was basically prevent the Place Order button action if a ‘date field’ was empty, and give an alert. Something like:
//prevent place order button submitting
$('#place_order').bind('click.orderclick', function (event) {
// Check DATE input value
var dateInput = $('#order_wcj_checkout_field_7').val().length;
console.log('date input:' + dateInput);
if (dateInput == 0) {
alert("Please select a pickup date.");
event.preventDefault();
$('#order_wcj_checkout_field_7').css({
'border': 'solid 1px red'
});
$('html, body').animate({
scrollTop: $("#order_wcj_checkout_field_7").offset().top - 130
}, 1000);
} else {
// remove click preventDefault
$('#place_order').unbind('.orderclick');
$('#order_wcj_checkout_field_7').css({
'border': 'none'
});
$('#order_wcj_checkout_field_7_field > label > .required').remove();
}
I am going the other way – so I have fields defaulted to required on a registration and when a checkbox is clicked to reuse billing data for a registration I hide the registration fields and would then like to make them un-required. My short term fix was to just fill in dummy data to allow the user to submit. Clunky but got me a near term answer. So while I would like to turn it off I think I will likely instead just do a copy of the form data to fill in instead of hiding the form fields.
I am old school and it bothers me to store/pass extra data instead of just the duplicate flag to my customer database. So your solution to implement a client side check and not use the Woo required flag is one solution. Another thought would be to do an Ajax call to a server side function but I have not seen a good action function in Woo to do this.
Thanks for sharing.
