javascript - 我的自动完成中出现故障以显示 jquery 验证错误？

Question

希望这个问题有用。

In my autocomplete success I make my input hidden value 1 to avoid jquery validation and append the current customer name to the particular input field and all are working fine.

My glitch is if supposed user manually delete the value of input field which have current customer name, I want to show jquery validation error. But how can I show that??. Because In my autocomplete success I made the hidden value 1. So its failed to show the error and I cant check that in keyup or keydown function, Beacuse using that input id I already written the autocomplete.

$(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);
  };

}); 

this is my function to fetch customer details using 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'
  }
});

Answer 1

在您的 JavaScript 中，向自动完成元素添加更改监听器，并检查是否为空值。如果该值为空，请将隐藏输入的“避免验证”标志设置为 0，然后对该元素使用所需的验证规则。

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