Woocommerce - 使用 ajax 表格显示通知

Question

I'm editing the woocommerce form-edit-account.php template. The template contains a form that allows users to change the settings (name, surname, etc.). Originally the form does not perform ajax requests, so to save the settings without refreshing the page I added ajax requests. Everything works fine except handling error. When a field is left blank or not respected in its conditions, woocommerce error messages do not appear.

I found a similar post here, but couldn't figure out how to fit it according to my form.: Display woocommerce notice through Ajax callback on product page

My problem is that the form continues to work normally, when the fields are not respected I do not see any error message after submitting. However when the page is reloaded the messages are displayed correctly. So I'm getting the messages inserted in functions.php but only after page refresh and not at submit time. Anyone help me figure out what am I wrong? I appreciate any help and thank you for any replies.

here's what i did

Example form (form-edit-account.php)

form name="Form" class="mts-edit-account" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" enctype="multipart/form-data" <?php add_action( 'woocommerce_edit_account_form_tag', 'action_woocommerce_edit_account_form_tag' );?> > 
  <!-- Fist & Last Name Field -->
  <div class="row name_surname">
    <div class="form-row">
      <label class="t3" for="account_first_name">Nome *</label>
      <input type="text" placeholder="Inserisci il tuo nome" class="field-settings" name="account_first_name" id="account_first_name" value="<?php echo esc_attr( $user->first_name ); ?>" />
    </div>

    <div class="form-row">
      <label class="t3" for="account_last_name">Cognome *</label>
      <input type="text" placeholder="Inserisci il tuo cognome" class="field-settings" name="account_last_name" id="account_last_name" value="<?php echo esc_attr( $user->last_name ); ?>" />
    </div> 

    <!-- Save Settings -->
    <p style="margin-bottom: 0px!important;">
      <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
      <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Salva modifiche', 'woocommerce' ); ?></button>
      <input type="hidden" name="action" value="save_account_details" />
    </p>
  </div>
</form>

Js File

jQuery(document).ready(function($) {
    
    $('.mts-edit-account').on('submit', function(e) { 
        e.preventDefault(); 

    //Ajax function
    jQuery.ajax({
      
      type: "post",
      data: { action: 'save_account_details' },
      url: "wp-admin/admin-ajax.php",
      success : function( response ) {
        $('woocommerce-notices-wrapper').append(response);
      },

      error: function(error) {
        console.log(error);
      }  

    });
    });
});

functions.php

add_action( 'wp_ajax_save_account_details', 'save_account_details' );
add_action( 'wp_ajax_nopriv_save_account_details', 'save_account_details' );
add_action( 'woocommerce_save_account_details_errors','save_account_details', 10, 1 );
function save_account_details($args) {

  if (trim($_POST['account_first_name']) == '') {
    $response = wc_add_notice("Field Name Required", "notice");
  } else {
    $response = 'Settings Saved!';
  }

  // Don't forget to exit at the end of processing
  echo json_encode($response);
  exit();

}

Answer 1

wc_add_notice() adds the notice in session in order to be printed after the reload.

in your case you need to use the printing function wc_print_notices()

It should be like that.

wc_add_notice("Field Name Required", "notice");
$response = wc_print_notices( true );

also, You are using 'wp_ajax_nopriv' that means any non logged-in user can send that request and change the settings. you need to remove that.