jQuery 验证自定义方法

Question

我正在使用 Google Places API 和 jQuery 验证构建一个表单。我有一个供用户填充地址的字段，我需要强制他从 Google Places API 建议中选择一个地址。我添加了一个值为 false 的隐藏输入，我有一个附加到更改事件原始字段，如果用户从 API 建议中进行选择，则隐藏字段值将更改为 true，否则该值为 false。但不知何故它不起作用..这是我的代码。我在这里做错了什么？如果我从建议中选择一个地址，则隐藏输入的值将更改为 true。虽然 on Change 事件不会在清除或更改时将隐藏字段的值更改为 false，但它会等待字段模糊，然后更改值。如果我在输入事件上使用，它会更改隐藏字段的值即使用户只是聚焦它，也可以输入。即使隐藏输入的值为 false，自定义验证也不起作用，它不会显示错误消息，只是接受有效的信息..

HTML：

<div className="half-width">
    <label htmlFor="address">Type in your address:</label>
    <input class="half-width__field" required data-msg="This field is required" data-msg-alt="Please select a valid address from the suggestions" type="text" name="address" id="address" />
    <input id="address_validate" name="address_validate" type="hidden" value="false" />
</div>

JS：

$('#address').on('change', function() {
    // if ( ! $(this).val() ) {
        sessionStorage.clear();
        $('#address_validate').val('false');
    // }
});

// init Google Places API on origin field
const addressField = new google.maps.places.Autocomplete($('#address')[0], {
    fields: ["address_component"],
});
google.maps.event.addListener(addressField, 'place_changed', function() {
    var place = addressField.getPlace();
    let cityFound = false;
    
    sessionStorage.clear();
    $('#address_validate').val('false');
    
    for (var i = 0; i < place.address_components.length; i += 1) {
        var addressObj = place.address_components[i];
        $('#address_validate').val('true');
        sessionStorage.setItem('address', $('#address').val());
    }
});

// jQuery Validate custom method
$.validator.addMethod('isValidAddress', function (value, element, param) {
    if ( $('#address_validate').val() === 'false') {
        return false;
    } else {
        return true;
    }
}, $('#address').attr('data-msg-alt'));

form.validate( {
    errorElement: 'span',
    errorClass: 'error-message',
    errorPlacement( error, element ) {
        error.appendTo( element.closest( '.half-width__field' ) );
    },
    highlight: function(element, validClass) {
        $(element).parent().addClass('field-error');
    },
    unhighlight: function(element) {
        $(element).parent().removeClass('field-error');
    },
    rules: {
        address: {
            required: true,
            minlength: 2,
            isValidAddress: true,
        }
    }
} );

Answer 1

不要将该值设置为 true，因为它不会触发字段的更改事件，因为它是平淡无奇的设置，而是使用 jQuery 触发方法来代替

https://api.jquery.com/trigger/

所以类似：

$('#address_validate').val('true');
$( '#address_validate' ).trigger( "change" );