Плагин jQuery Form Validator требует, чтобы значение было одним из предложенных значений

Question

У меня есть форма, которая использует плагин jQuery Form Validator из www.formvalidator.net (версия 2.3.26) с именем поля street.data-suggestion заполнен названиями улиц из набора данных json, используя следующий код:

$(function() {
  $.validate();
});

var streets = ["ABACOWEG", "ABATTOIRWEG", "ADMIRAALSWEG"];

if ($("input[name='street']").length) {
  var array = [];
  streets.forEach(function(name) {
    array.push(name);
  });
  $.formUtils.suggest($("input[name='street']"), array);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.79/jquery.form-validator.min.js" integrity="sha256-H7bYoAw738qgns17P+7wWt77AfnEh7yCJMQGUCNcxQA=" crossorigin="anonymous"></script>
<input id="field_1851" class="form-control" type="text" name="street" value="" data-validation="length" data-validation-length="min5" data-suggestions="">

$(function() {
    $.validate();
});

var streets = var streets = ["ABACOWEG","ABATTOIRWEG","ADMIRAALSWEG",.......];

if($("input[name='street']").length) {
   var array = [];
   streets.forEach(function(name) {
       array.push(name);
   });
   $.formUtils.suggest($("input[name='street']"), array);
 }

Поле формы выглядит следующим образом:

<input id="field_1851" class="form-control" type="text" name="street" value="" data-validation="length" data-validation-length="min5" data-suggestions="">

Предложение работает нормально, но хотелось бы, чтобы валидатор проверил,название улицы из предложения было выбрано.Таким образом, пользователь не может добавить свое собственное название улицы, когда его нет в списке.

Не могу найти это в документации, поэтому любая помощь будет высоко ценится.

PS.Я знаю, что могу создать метод ajax, который выполняет эту проверку, но я в основном задаюсь вопросом, возможно ли это в одном и том же сценарии валидатора

Answer 1

Вы можете использовать что-то вроде этого (я собрал это вместе очень быстро, чтобы вы могли улучшить его)

var streets = ["ABACOWEG", "ABATTOIRWEG", "ADMIRAALSWEG"];
$(function() {
  $.formUtils.suggest($("input[name='street'][type='text']"), streets);

  // Add custom validation rule
  $.formUtils.addValidator({
    name: 'fromstreets',
    validatorFunction: function(value, $el, config, language, $form) {
      let isIncluded = streets.includes(value);
      if (!isIncluded) {
        if ($("#updatestreets").is(":checked")) {
          console.log("ready to update");
          $el.trigger("update-street");
          return !isIncluded;
        }
      }
      return isIncluded;
    },
    errorMessage: 'You have to answer with a street',
    errorMessageKey: 'badStreet'
  });

  let vstreet = $("input[name='street'][type='text']");
  vstreet.on('beforeValidation', function(value, lang, config) {
      
      console.log('before',streets );
    })
    .on('update-street', function(event) {
      let v = $(this).val();
      console.log('adding:', v, event.type);
      if (!streets.includes(v)) {
        console.log('not in there yet');
        streets.push(v);
        $.formUtils.suggest($("input[name='street']"), streets);
        $(this).validate();
      }
    });
  $('#myform').on('submit', function() {
    return false;
  });
  $.validate();
  vstreet.val("CherryPie");
});

<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.79/jquery.form-validator.min.js" integrity="sha256-H7bYoAw738qgns17P+7wWt77AfnEh7yCJMQGUCNcxQA=" crossorigin="anonymous"></script>
<form id="myform">
  update Street: <input type="checkbox" id='updatestreets' value="1" />
  <input id="field_1851" class="form-control" type="text" name="street" value="" data-validation="fromstreets" data-validation-length="min5" data-suggestions="" />
</form>