Question

下面的表格使用Google自动填充API，它将输入“自动填充”并将其更改为第二种形式的单独项目（除非用户点击“无法找到地址？”，否则会隐藏这些项目。这一切都很有效，但是我使用JQuery来验证每个字段中是否有数据（通过将背景更改为绿色），这不能正常工作。当我单独输入每个字段并使它们变为绿色时，它可以正常工作，但既不是自动完成输入也不是个人输入发生这种情况时输入变为绿色。 HTML

<div id="locationField">
    <input id="autocomplete" placeholder="Begin typing an address"
               onFocus="geolocate()" type="text" class="form-control"/>
    <sup><a id="newClientAddressFormLink">Can't find an address?</a></sup>
</div>

<div id="newClientAddressForm" style="display:none;">
    <div id="address">
        <div>
            <input type="text" data-street-number-id="0" class="form-control" id="street_number" maxlength="10" placeholder="Number*" />
            <div id="StreetNumberValidation" class="alert alert-danger complaint-validation" role="alert" style="display: none; max-width: 280px;"><strong>Number</strong> required!</div>
        </div>
        <div>
            <input type="text" data-street-name-id="0" class="form-control" id="route" maxlength="50" placeholder="Street*" />
            <div id="StreetNameValidation" class="alert alert-danger complaint-validation" role="alert" style="display: none; max-width: 280px;"><strong>Street</strong> required!</div>
        </div>
   </div>
</div>

JQuery的

$(function () {
    $(document).on('change keyup blur input', "#autocomplete", function () {
        if (this.value.length > 25)
        {
            checkStreetNumberLength(document.getElementById("#street_number"));
            checkStreetNameLength(document.getElementById("#route"));
            $("#autocomplete").css("background-color", "#dff0d8");
        }    
    });
    // Street Number (ID is from Google Autocomplete API)
    $(document).on('change keyup blur input', "#street_number", function () {
        checkStreetNumberLength(this);
    });
    // Street Name (ID is from Google Autocomplete API)
    $(document).on('change keyup blur input', "#route", function () {
        checkStreetNameLength(this);
    });
});

var checkStreetNumberLength = function (fn) {
    if (fn.value.length < 1) {
        $("#street_number").css("background-color", "#fff");
    }
    else {
        $("#street_number").css("background-color", "#dff0d8");
    }
}
var checkStreetNameLength = function (fn) {
    if (fn.value.length < 5) {
        $("#route").css("background-color", "#fff");
    }
    else {
        $("#route").css("background-color", "#dff0d8");
    }
}

它会在Uncaught TypeError: Cannot read property 'value' of null和if (fn.value.length < 1)上返回if (fn.value.length < 5)错误。

有什么想法吗？

Answer 1

混合使用DOM和jQuery并不是一个好主意，尤其是如果混合使用选择器的话。

--force-rpath
          Forces the use of the obsolete DT_RPATH in the file instead of
          DT_RUNPATH. By default DT_RPATH is converted to DT_RUNPATH.

不应该有#jQuery或querySelector。而是使用jQuery并传递jQuery对象：

document.getElementById("#street_number")

然后当你通过时，使用传递的：

checkStreetNumberLength($("#street_number"));
checkStreetNameLength($("#route"));

您也可以触发一个事件并删除一些代码：

var checkStreetNumberLength = function ($obj) { // jQuery object passed
  $obj.css("background-color", $obj.val().length < 1?"#fff":"#dff0d8");
}

var checkStreetNameLength = function ($obj) {
  $obj.css("background-color", $obj.val().length < 5?"#fff":"#dff0d8");
}

Answer 2

document.getElementById不使用＃。

另外，或者，因为你正在使用jQuery：document.getElementById("#street_number")也可以写成$("#street_number")[0]。 jQuery在第一个索引处返回一个类似于数组的包装器，其中包含本机DOM元素。

https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/

Jquery Uncaught TypeError：无法读取null的属性“value”

2 个答案: