Support » Plugin: WooCommerce » Make a custom checkout field ‘required’ with javascript (or jQuery)

  • Hi,
    I have 2 custom checkout fields and the 2nd one only shows if a certain option is selected in the drop down of the 1st custom field. I have used jQuery to make the 2nd one appear and disappear depending on the selection and I need the 2nd field to be required, but I have tried adding ‘required’ attribute to the input field and class ‘validate-required’ to the field’s parent row, yet the order form always submits regardless of these.
    Is it possible to make a field required with Javascript (or jquery)?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support laceyrod a11n


    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:
    – Advanced WooCommerce group on Facebook:

    Also, perhaps this resource may help:


    Thread Starter studiokb


    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:

    The core of this is the function:

    function actionRequire( actionToDo=’yes’, selector=” ){
    if ( actionToDo == ‘yes’ ) {
    $(selector+’ label > .required’).remove();
    $(selector+’ label’).append(required);
    } else {
    $(selector+’ label > .required’).remove();
    $(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.

    Thread Starter studiokb


    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.");
                        'border': 'solid 1px red'
                    $('html, body').animate({
                        scrollTop: $("#order_wcj_checkout_field_7").offset().top - 130
                    }, 1000);
                } else {
                    // remove click preventDefault
                        '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.

    • This reply was modified 2 years, 5 months ago by dirkjungquist.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Make a custom checkout field ‘required’ with javascript (or jQuery)’ is closed to new replies.