WooCommerce自定義結賬字段驗證

在本教程中,我們將刪除默認驗證并創建自定義驗證規則。我還將向您展示一個技巧,如何將所有默認驗證消息替換為一個。

刪除字段的默認驗證

如果您需要刪除某些WooCommerce結賬字段的驗證(例如,電子郵件、電話或郵政編碼),那么您要做的就是從字段中刪除 validate?參數。您可以在??woocommerce_checkout_fields?過濾器掛鉤中進行操作,例如:

add_filter( 'woocommerce_checkout_fields', 'misha_no_email_validation' );
 
function misha_no_email_validation( $fields ){
 
	unset( $fields['billing']['billing_email']['validate'] );
	return $fields;
 
}

我已經在WooCommerce結賬字段教程中提到了該話題,??請在此處查看其他示例。

驗證名字和姓氏僅包含字母

創建自定義驗證時,您不需要通過?woocommerce_checkout_fields? 執行任何操作 (?當然,我的意思是? validate ?參數)。

只需使用  woocommerce_after_checkout_validation 添加您的自定義驗證規則和錯誤消息。

add_action( 'woocommerce_after_checkout_validation', 'misha_validate_fname_lname', 10, 2);
 
function misha_validate_fname_lname( $fields, $errors ){
 
    if ( preg_match( '/\\d/', $fields[ 'billing_first_name' ] ) || preg_match( '/\\d/', $fields[ 'billing_last_name' ] )  ){
        $errors->add( 'validation', 'Your first or last name contains a number. Really?' );
    }
}

這是我的結果:

JavaScript驗證

您在上一個屏幕截圖中注意到了什么奇怪的地方嗎???沒有?您是否看到錯誤消息指出名字或姓氏不正確,但是兩個字段都以綠色而不是紅色突出顯示?

讓我表明我的意思:

這樣就好多了吧?如何實現呢?

WooCommerce JS驗證函數 checkout.js? 已經存在,?但是它僅檢查電子郵件是否與模式匹配以及必填字段是否為空。我們必須在某處添加一些自定義JavaScript來創建我們自己的驗證功能。我們需要的是使用兩個包裝器類進行操作:??woocommerce-validated和?woocommerce-invalid

以下是“姓氏”字段的一個非常簡單的示例,您可以根據需要升級此代碼。

$('body').on('blur change', '#billing_last_name', function(){
	var wrapper = $(this).closest('.form-row');
	// you do not have to removeClass() because Woo do it in checkout.js
	if( /\d/.test( $(this).val() ) ) { // check if contains numbers
		wrapper.addClass('woocommerce-invalid'); // error
	} else {
		wrapper.addClass('woocommerce-validated'); // success
	}
});

以防萬一,如果您不知道將代碼放置在哪里–您可以將其插入網站中現有的任何js文件中,甚至插入到網站中??wp_footer(),例如:

<?php
add_action( 'wp_footer', 'misha_checkout_js' );
function misha_checkout_js(){
 
	// we need it only on our checkout page
	if( !is_checkout() ) return;
 
	?>
	<script>
	jQuery(function($){
		// 添加js驗證代碼到這里
	});
	</script>
	<?php
}

如何僅顯示一條錯誤信息?

WooCommerce默認會分別顯示每個字段的驗證信息,看起來很多,但是都是要表達一個意思,就是必填字段必須填寫:

所以我們要替換上面的錯誤信息,統一顯示一個“請填寫所有必填字段”:

要實現我們的想法,其實很簡單:

add_action( 'woocommerce_after_checkout_validation', 'misha_one_err', 9999, 2);
 
function misha_one_err( $fields, $errors ){
 
	// 如果有驗證錯誤信息
	if( !empty( $errors->get_error_codes() ) ) {
 
		// 移除所有錯誤信息
		foreach( $errors->get_error_codes() as $code ) {
			$errors->remove( $code );
		}
 
		// 添加我們自定義的信息
		$errors->add( 'validation', 'Please fill the fields!' );
 
	}
 
}

請注意,上面的代碼刪除了所有類型的錯誤,而不僅僅是“此字段是必需的”。因此,您可以在刪除錯誤之前檢查錯誤的類型。

錯誤類型:

  • required-field
  • terms?(條款和協議復選框)
  • payment

因此,您可以在上面代碼的第10行添加如下條件:

if( $code != 'terms' ) $errors->remove( $code );

關于結賬界面的修改,可以看下:

如果您對 WooCommerce 的使用還不太了解,或者想系統學習 WooCommerce 開發,可以學習教程《WooCommerce 開發指南視頻課程(使用詳解/主題開發/支付寶網關開發)》。

聲明:原文出自 https://rudrastyh.com/woocommerce/custom-checkout-validation.html ,由 WordPress大學 翻譯整理,轉載請保留本聲明!

倡萌

一個文科IT宅男,喜歡折騰WordPress和被它折騰 ^_^

暫無評論

發表評論