No validation and other UX issues

  • Hi there, nice plugin. I have noticed one major flaw: when a user clicks the add new address button and then clicks submit in the modal without filling in any data, the blank address is saved. This plugin needs some form validation.

    Also, from a UX standpoint it does not make sense to show the select field for choosing an address when zero addresses are saved. In addition, the placeholder text of “…Choose address…” is odd: there should not be … at either end.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Page Wood

    (@pwood)

    Also, on the my account view: why are you displaying each address detail as a table row? The address data should be displayed in an <address> element with <br> tags where appropriate, just like the default WooCommerce behavior.

    Thread Starter Page Wood

    (@pwood)

    One last thing: these addresses are displayed one after another in a single table without any separation. This leads to a jumbled layout, and doesn’t offer any way via CSS to differentiate between the different addresses: https://tinyurl.com/yxsgnlow

    • This reply was modified 4 years, 6 months ago by Page Wood.
    anonymized-14942572

    (@anonymized-14942572)

    Hi Page, in:

    /wp-content/plugins/multiple-shipping-address-woocommerce/js/front.js

    You can add this line (after line 20) to add validation for all billing input fields:

    jQuery("input").prop('required',true);

    And you can add requiered to all <input> fields to validate the “Reference name” in:

    /wp-content/plugins/multiple-shipping-address-woocommerce/includes/oc-ocwma-front.php

    anonymized-14942572

    (@anonymized-14942572)

    After the first lines of front.js:

    jQuery.ajax({
	url:ajax_url,
	type:'POST',
	data:'action=productscommentsbilling&popup_id_pro='+id,
	success : function(response) {
		var loading = jQuery('.ocma_loading');
		loading.remove(); 
		jQuery("#ocwma_billing_popup").css("display","block");
		jQuery("#ocwma_billing_popup").html(response);

    You can add this lines for more control:

    //Required fields
jQuery("input[name='billing_first_name']").prop('required',true);
jQuery("input[name='billing_address_1']").prop('required',true);
jQuery("input[name='billing_city']").prop('required',true);
jQuery("input[name='billing_country']").prop('required',true);
jQuery("input[name='billing_state']").prop('required',true);
jQuery("input[name='billing_postcode']").prop('required',true);
jQuery("input[name='billing_email']").prop('required',true);
jQuery("input[name='billing_phone']").prop('required',true);

    Add as you need in the other form functions or required fields.

    • This reply was modified 4 years, 5 months ago by anonymized-14942572.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘No validation and other UX issues’ is closed to new replies.