在表单 php 上显示 JS 警报

Question

我有以下 php 代码，它是一个 wordpress 钩子，用于在我网站的购物车页面上显示地址自动完成表单。

    function add_woocommerce_before_shipping_calculator() {
    $button_text = esc_html( 'Please enter your street & suburb to display available shipping options', 'woocommerce' );
    if (WC()->customer->get_shipping_postcode() != null && WC()->customer->get_shipping_city() != null)
        $button_text = esc_html( 'Not your suburb? Enter a different site', 'woocommerce' );
    $content = '<div>
    <a href="#" class="shipping-calculator-button-auto" style="color: green;" >'.$button_text.'</a>
    <div class="form-row form-row-wide" id="calc_shipping_address_auto_field"> 
    <form class="shipping-calculator-form-auto-form" style="display:block;">
        <input type="text" style="border-color:black; border-style: dashed; padding: 20px;" class="input-text" placeholder="Type your suburb" name="calc_shipping_address_auto" id="calc_shipping_address_auto">
    </form></div>
    </div>';
    echo $content;
}

add_action( 'woocommerce_before_shipping_calculator', 'add_woocommerce_before_shipping_calculator' );

函数写在functions.php文件中。我不希望客户输入他们的单元号或门牌号。因此，如果客户在输入字段中输入“/”字符，我想显示一个简单的 js 警报。最好的方法是什么？

Answer 1

使用HTML attribute: pattern

<form onsubmit="return false;">
<input type="text" style="border-color:black; border-style: dashed; padding: 20px;" class="input-text" placeholder="Type your suburb" name="calc_shipping_address_auto" id="calc_shipping_address_auto" pattern="[^\/]*">
<input type="submit">
</form>