Question

我在表单中使用谷歌自动完成和jQuery验证，它适用于以下情况。

用户键入位置，使用自动填充功能通过鼠标单击选择值。
用户键入位置并移至下一个字段或点击任意位置，然后位置字段变空。（因为要求是用户应该选择值，他们不能输入并提交随机值）

以上条件正常。但

用户键入位置，通过单击输入按钮选择值。在这种情况下，值即将到来，但jQuery验证仍显示please enter the location（请查看下图）。当用户单击某处或将光标移动到下一个字段时，只有错误消息变为隐藏。

如果用户通过单击“输入”选择该值，则在选择值时不应显示错误消息。如果未选择值，则显示错误消息即可。

请帮帮我。 DEMO

＆＃13;

$( "form" ).validate({
    focusInvalid: false,
    submitHandler: function() {
        alert( "Successful submission" );         
    }
});

$("#locationTextField").on("blur", function () { 0 == $(this).val().trim().length ? ($("#locationTextField").parents("div").removeClass("has-error").addClass("success"), $("#locationTextField-error").hide()) : $("#locationTextField").removeClass("success").addClass("has-error")
    });

＆＃13;

form > div {
    margin: 1em;
}
form button {
    width: 100%;
}
label { display: block; }
input {
    width: 100%;
    padding: 0.2em;
}
button {
    padding: 0.2em;
}
 
label.error {
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&dummy=.js"></script>
<form>
    <div>
        <label for="name">Location:</label>
        <input type="text" id="locationTextField" style="color:#555 !important;" onChange="return validateCity()" placeholder="" name="location" class="form-control" required maxlength="150" data-msg-required="Please enter your location">
    </div>
    <div>
        <label for="name">Name:</label>
        <input type="text" placeholder="" name="name" class="form-control" required maxlength="150" data-msg-required="Please enter your name">
    </div>
    <div>
        <button>Submit</button>
    </div>
</form>

<script>
function initialize() {
    var e = document.getElementById("locationTextField");
    new google.maps.places.Autocomplete(e);
}

google.maps.event.addDomListener(window, "load", initialize);

function validateCity() {
    return searchfield = $("#locationTextField").val(), "" == searchfield || null == searchfield ? !1 : ($("#locationTextField").val(""), !1)
}
</script>

＆＃13;

Answer 1

整个问题是由于jQuery Validate插件仅由onkeyup，focusout等用户交互触发的事实引起的。由于您是以编程方式更改此字段的值，因此验证总是被跳过。

解决方案只需使用插件的.valid()方法以编程方式触发验证。但是，由于该字段由Google自动填充功能填充，因此您需要找到可以用来调用.valid()的内置事件。 Google提供了适用于此的place_changed事件。

创建一个用于检查place_changed事件的Google侦听器。
每当位置发生变化时，都可以使用该事件呼叫.valid()。该字段将被验证，错误将自动显示/隐藏。
删除内联onChange功能。这不是必需的。
删除整个validateCity功能。它也不需要。
删除blur处理函数。由于该插件旨在自动处理这些更改，因此不需要它。

新代码：

function initialize() {
    var e = document.getElementById("locationTextField");
    var autocomplete = new google.maps.places.Autocomplete(e);
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        $('#locationTextField').valid();  // trigger validation after place selected
    });
}

google.maps.event.addDomListener(window, "load", initialize);  // initialize Google Maps

$("form").validate({  // initialize Validate plugin
    // options
});

DEMO：jsfiddle.net/x0jt2jux/1/

Answer 2

非常感谢@Sparky。

我一直在使用变量，但是我想我会切换到您的方法，这显然是执行此操作的真正方法。无论如何，如果有人需要我的东西（即使我建议使用Sparky的答案），这也是它的工作方式：

（在页面加载时，设置googleAdressFill = 0，然后在执行fillInAddress()时，设置googleAdressFill = 1）

然后，使用addMethod函数为jQuery验证器添加方法：

jQuery.validator.addMethod("myMethod", function(value, element) {
   if (googleAdressFill === 0) 
       return this.optional(element);
   else
       return true;
   }, "You need to enter and select address from suggestion.");

并在jQuery验证选项中声明新的rule方法。

  rules: { nameOfInput: { myMethod: true } }

jQuery验证不适用于Google自动完成输入

2 个答案: