我正在使用Google Places API和jQuery Validation构建一个表单。我有一个供用户填充地址的字段,我需要强制他从Google Places API建议中选择一个地址。我添加了一个值为false的隐藏输入,我将一个on change事件附加到原始字段,如果用户从API建议中选择,隐藏字段值将更改为true,如果不是,则值为false。但不知何故,它不起作用..这是我的代码。我在这里做错了什么?如果我从建议中选择一个地址,隐藏输入的值将更改为true。尽管在清除或更改时,on change事件不会将隐藏字段的值更改为false,它等待字段被模糊,然后更改值。.如果我使用on input事件,即使用户只是关注它,它也会更改隐藏输入的值。即使隐藏输入的值为false,自定义验证也不起作用,它不显示错误消息,只是接受有效的。
超文本标记语言:
<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,
}
}
} );
型
1条答案
按热度按时间8mmmxcuj1#
不要将该值设置为true,因为它不会触发字段的更改事件,而是使用jQuery trigger方法
https://api.jquery.com/trigger/
比如说
字符串