小故障在我的自动完成中显示jquery验证错误?

时间:2018-08-03 05:55:44

标签: javascript jquery laravel

希望这个问题有用。

  

在自动完成成功中,我将输入的隐藏值设为 1 以避免   jQuery验证并将当前客户名称附加到   特定的输入字段,并且一切正常。

     

我的故障是,如果假定用户手动删除输入字段的值   具有当前客户名称的我想显示jquery验证   错误。但是我怎么证明呢?因为在我的自动完成成功中,我   将隐藏值设为 1 。因此它无法显示错误,并且我无法在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);
  };

}); 
  

这是我使用自动完成功能获取客户详细信息的功能

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 个答案:

答案 0 :(得分:1)

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

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