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)?
    Thanks

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support 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.

    dirkjungquist

    (@dirkjungquist)

    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.

    studiokb

    (@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.");
                    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();
                }
    
    dirkjungquist

    (@dirkjungquist)

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.