Как запретить пользователям отправлять ложные значения списка данных в html? - PullRequest
Новая
       9

Как запретить пользователям отправлять ложные значения списка данных в html?

0 голосов
/ 04 декабря 2018

У меня есть код для Datalist: 

$('input[list]').on('input', function(e) {
  var $input = $(e.target),
    $options = $('#' + $input.attr('list') + ' option'),
    $hiddenInput = $('#' + $input.attr('id') + '-hidden'),
    label = $input.val();

  $hiddenInput.val(label);

  for (var i = 0; i < $options.length; i++) {
    var $option = $options.eq(i);

    if ($option.text() === label) {
      $hiddenInput.val($option.attr('data-value'));
      break;
    }
  }
});

// For debugging purposes
$("#myForm").on('submit', function(e) {
  $('#result').html($('#answer-hidden').val());
  e.preventDefault();
});


  
  
        
        
        
        
    
  
  





Submitted value (for debugging):

Я ищу Elite как El и выбираю опцию Elite и нажмите кнопку отправки , результат будет 1337 . ХОРОШО

Но, когда я ищу Elite как El и нажимаю submit button(без выбора опции Elite или любой другой ...), результат будет El . ПЛОХО .

Как запретить пользователям отправлять ложные значения?

1 Ответ

0 голосов
/ 04 декабря 2018

Как уже упоминалось @ ecg8, вы должны иметь прослушиватель событий в раскрывающемся списке и активировать кнопку отправки, только если выбрано правильное значение.Это будет работать для вас: 

var validValues = [42, 1337, 69, 3];
$("#answer").on("change", function() {
    var validValueSelected = validValues.some(x => x == $('#answer-hidden').val());
    document.getElementById("submitButton").disabled = !validValueSelected;
});

И измените вашу кнопку subimt на: 

<input id="submitButton" disbaled type="submit">

Хотя я бы не рекомендовал жестко кодировать значения ваших данных в html, а затем дублировать ихв файле JavaScript (т. е. переменная validValues).Я бы порекомендовал использовать такую ​​библиотеку, как KnockOut , которая может вам помочь.

...