2

Smarty Streets Live Address 検証を使用するフォームがあります。一般的にはうまく機能します。ただし、ユーザーが住所情報の入力を開始した場合、実際の住所の検証が邪魔になる可能性があります。発生する最も具体的な問題は、住所情報が入力されたが、ユーザーがフォームをキャンセルすることを選択した場合です。Live Address 検証は操作よりも優先され、検証を無効にしてフォームをクリアしようとする試みをブロックします。

問題のフィドルの例は、ここにあります。

<form>
   <input type="text" id="street" name="street" placeholder="street"><br>
   <input type="text" id="city" name="city" placeholder="city"><br>
   <input type="text" id="state" name="state" placeholder="city"><br>
   <input type="text" id="ZIP" name="ZIP" placeholder="ZIP"><br>
   <button id="btnCancel">Cancel</button>
</form>
<script>
    var ss = jQuery.LiveAddress({ key: '5640108848289556771', debug: true })

    $(function () {
        $("#btnCancel").click(function (e) {
            e.preventDefault();
            alert("click");
            ss.deactivate();
        });
    });
</script>

データが入力されていない場合、クリック イベントは目的どおりに機能しますが、住所情報が入力されると、Live Address 検証によってイベント ハンドラーが起動されなくなります。

キャンセル ボタンをクリックすると、フォームはクリアされるか、前のページに戻る必要がありますが、代わりに Live Address 検証が引き継ぎ、他のすべてのアクションをブロックします。

ボタン クリック イベントで Live Address 検証を無効にするにはどうすればよいですか?

4

2 に答える 2

0

最後の要素がボタンの場合は機能しませんでした ( を使用した場合でもevent.stopPropagation();、A リンクを使用しました。

これを行うために、住所フィールドをマッピングし、住所 ID を割り当ててから、activate() および activate() 関数を使用しました。これにより、管理者ユーザーが検証をバイパスして、何も入力せずにフォームを投稿できるようになりました。チェックマークの可視性を.smarty-tagチェックして、検証を有効にするか無効にするかを決定します。

<script type="text/javascript">
var liveaddress = jQuery.LiveAddress({
    key: "key",
    debug: true,
    addresses: [{
        id: 'AddressID',
        street: '#Address',
        street2: '#Address2',
        city: '#City',
        state: '#State',
        zipcode: '#Zip',
        country: '#Country'
    }]
});
$(function(){
    /* If re-editing and address is pre-populated, don't revalidate */
    liveaddress.on("MapInitialized", function(event, data, previousHandler){
        if ($('#Address').val().length !== 0){
            liveaddress.deactivate('AddressID');
        }
    });

    $('#toggleSS').click(function(e){
        e.preventDefault();
        if ($('.smarty-tag:visible').length){
            liveaddress.deactivate('AddressID');
        } else {
            liveaddress.activate('AddressID');
        }
    });
    /* If editing address, auto-enable verification */
    $('#Address').keyup(function(){
        if (!$('.smarty-tag:visible').length){
            liveaddress.activate('AddressID');
        }
    });
});
</script>


<input type="submit" value="Save"> <a href="#" id="toggleSS">Toggle Verification</a>
于 2015-12-01T18:24:57.927 に答える