代码之家 › 专栏 › 技术社区 › Siva Ganesh

自动完成功能显示jquery验证错误时出现故障?

laravel jquery javascript

Siva Ganesh · 技术社区 · 6 年前

希望这个问题有用。

在我的自动完成成功中,我将输入隐藏值一避免 jquery验证并将当前客户名称附加到特定的输入字段和所有的工作正常。

我的问题是如果假设用户手动删除输入字段的值有当前客户名称,我想显示jquery验证错误。但我怎么才能证明呢??. 因为在我的自动完成成功中使隐藏的价值一 . 所以它无法显示错误,我无法在keyup或keydown函数中检查,因为使用输入id我已经编写了自动完成。

$(document).ready(function() {
  $("#apendexistingCustomer").autocomplete({
    autoFocus: true,
    source: '{{ url("/getexistingcustomer") }}',
    minLength: 2,
    select: function(event, ui) {
      event.preventDefault();
      if (ui.item.label == 'This customer is not in our records.') {
        $('#apendexistingCustomer').val('');
        $('#existcustomers').val('');
        $('#create').valid();
        swal("This customer is not in our records.", "", "warning");
      } else {
        $('#apendexistingCustomer').val(ui.item.label);
        $('#existcustomers').val(ui.item.key);
        $('#create').valid();
        getCustomerDet(ui.item.key);
      }
    },
    focus: function(event, ui) {
      selectFirst: true;
      event.preventDefault();
    },
    open: function(event, ui) {
      $(this).autocomplete("widget")
        .appendTo("#results").css({
          'position': 'static',
          'width': '100%'
        });
      $('.ui-autocomplete').css('z-index', '9999999');
      $('.ui-autocomplete').addClass('srchuser-dropdown');
    }
  }).data("ui-autocomplete")._renderItem = function(ul, item) {
    return $("<li style='height:60px;'><span class='srchuser-downname'>" + item.label + "</span></li>").data("ui-autocomplete-item", item).appendTo(ul);
  };

});

这是我使用autocomplete获取客户详细信息的函数

protected function getexistingcustomer() {
  if (Request::ajax()) {
    $data = Request::all();
    $searchVal = $data['term'];
    if ($searchVal != '') {
      $searchResult = customers::searchCustomerAutoComplete(trim($searchVal));
    }
    $finalArr = array();
    if (!empty($searchResult)) {
      foreach($searchResult as $vk => $sf) {
        $finalArr[$vk]['label'] = $sf['firstname'].
        ''.$sf['lastname'];
        $finalArr[$vk]['key'] = 1;
      }
    } else {
      $finalArr[0]['label'] = 'This customer is not in our records.';
    }
    print json_encode($finalArr);
    exit;
  }
}

客户输入字段

<div class="row" id="selectcusDiv">
  <div class="col-12 col-sm-6 col-md-4">
    <div class="form-group">
      <label><sub>*</sub>Customers</label>
      <div class="select-container">
        <input type="text" id="apendexistingCustomer" name="apendexistingCustomer" class="form-control fieldcls">
        <input type="hidden" id="existcustomers" name="existcustomers" value="" class="form-control fieldcls">
      </div>
    </div>
  </div>
</div>

Jquery验证

$('#create').validate({
  ignore: [],
  rules: {
    existcustomers: 'required'
  },
  messages: {
    existcustomers: 'please enter'
  }
});

1 回复 | 直到 6 年前

Joe 6 年前

在javascript中,向autocomplete元素添加一个更改侦听器,并检查是否有空值如果值为空,则将“避免验证”标志隐藏输入设置为 0 ,然后对该元素使用所需的验证规则。

$("#apendexistingCustomer").on("change", function(){
    if($(this).val() == ""){
        $("#validateFlag").val(0)
    }
});