включить кнопки в javascript/jquery на основе соответствия регулярному выражению

Question

У меня возникли проблемы с получением match для привязки к свойству ввода текста oninput. В основном я хочу, чтобы моя кнопка отправки включалась только тогда, когда регулярное выражение сопоставляется. Если регулярное выражение не сопоставляется, сообщение должно отображаться, когда курсор находится над кнопкой отправки. Как бы то ни было, ввод abc не включает кнопку отправки, как я хочу. Может ли кто-нибудь сказать мне, что я делаю неправильно? Спасибо.

<div id="message"> 
    </div> 

<form method="POST"> 
    <input type="text" id="txt" oninput="match()" /> 
    <input type="submit" id="enter" value="enter" disabled /> 
</form> 

    <script> 

    var txt = $("#txt").value(); 

    var PATTERN = /abc/; 
    var REQUIREMENTS = "valid entries must contain the string 'abc'"; 

    // disable buttons with custom jquery function 

    jQuery.fn.extend({ 
    disable: function(state) { 
     return this.each(function() { 
      this.disabled = state; 
     }); 
     } 
    }); 

    $('input[type="submit"]).disable(true); 

    var match = function(){ 

     if (txt.match(PATTERN)){ 
     $("#enter").disable(false) 
     } 

     else if ($("#enter").hover()){ 
     function(){ 
      $("#message").text(REQUIREMENTS); 
     } 
     } 

    </script> 

Answer 1

Ваш код будет переписан с использованием простого/ванильного JavaScript.

Так что ваш код более чистые и более высокая производительность:

<div id="message"></div> 
    <form method="POST"> 
    <input type="text" id="txt" oninput="match()" /> 
    <input type="submit" id="enter" value="enter" disabled /> 
    </form> 

     <script> 
      var txt; 
      var enter = document.getElementById('enter'); 
      var message = document.getElementById('message'); 
      var PATTERN = /abc/; 
      var REQUIREMENTS = "valid entries must contain the string 'abc'"; 

      function match() { 
       txt = document.getElementById('txt').value; 
       if (PATTERN.test(txt)) { 
        enter.disabled = false; 
       } else if (isHover(enter)) { 
        enter.disabled = true; 
        message.innerHTML = REQUIREMENTS; 
       } else { 
        enter.disabled = true; 
       } 
      } 
      function isHover(e) { 
       return (e.parentElement.querySelector(':hover') === e); 
      } 
     </script> 

Если вы хотите сказать, что вы хотите обрабатывать события в различные моменты времени, ваш код должен быть следующим.

Примечание: кнопки при отключении не запускают события, поэтому решение является оберткой в ​​элементе div, который активировал события. Ваш код JavaScript более прост, хотя код HTML немного грязнее.

<form method="POST"> 
    <input type="text" id="txt" oninput="match()" /> 
    <div style="display: inline-block; position: relative"> 
    <input type="submit" id="enter" value="enter" disabled /> 
    <div id="buttonMouseCatcher" onmouseover="showText(true)" onmouseout="showText(false)" style="position:absolute; z-index: 1; 
       top: 0px; bottom: 0px; left: 0px; right: 0px;"> 
    </div> 
    </div> 

 <script> 
      var txt; 
      var enter = document.getElementById('enter'); 
      var message = document.getElementById('message'); 
      var PATTERN = /abc/; 
      var REQUIREMENTS = "valid entries must contain the string 'abc'"; 

      function match() { 
       txt = document.getElementById('txt').value; 
       if (PATTERN.test(txt)) { 
        enter.disabled = ''; 
       } else { 
        enter.disabled = true; 
       } 
      } 
      function showText(option) { 
       message.innerHTML = option ? REQUIREMENTS : ""; 
      } 
     </script> 

Answer 2

две проблемы:

1. Переменная TXT определяется один раз за пределами матча функции, поэтому значение фиксируется на любой вход с идентификатором TXT имеет, когда скрипт/страница загружается.

   Вы должны переместить var txt = $("#txt").val(); в функцию.

2. Уведомление Я изменил значение функции() на val().

Answer 3

Проблемы определены:

• JQuery события не происходят на входах инвалидов: см Event on a disabled input
  • Я не могу исправить JQuery, но я может имитировать отключенную кнопку без i t фактически отключен. Есть и другие хаки, которые вы можете сделать, чтобы обойти это, например, путем наложения прозрачного элемента, который фактически захватывает событие hover, когда кнопка отключена.
• Различные синтаксические ошибки: форматирования кода и читать сообщения консоли
  • .hover()){ function() { ... } } является недействительным.Он должен быть .hover(function() { ... })
  • else не нужно сопровождаться if, если нет условия
  • .hover(handlerIn, handlerOut) фактически takes 2 arguments, каждый из типа Function
  • $('input[type="submit"]) отсутствует близкий '
• Проблемы, выявленные by @Will
  • Функция jQuery для получения значения выбранного input элементов val()
  • val() следует называть каждый раз, так как вы хотите, чтобы последние обновленное значение, а не значение, когда страница загружена первая
• Design выпускает
  • Вы не перепроверить, как только вы включите вход. Если я вхожу в «abc», а затем удаляю «c», кнопка отправки остается включенной.
  • Вы никогда не скроете справочное сообщение после того, как вы закончите парить. Он просто остается там, так как вы устанавливаете текст, но не удаляете его.

https://jsfiddle.net/Lh4r1qhv/12/

<div id="message" style="visibility: hidden;">valid entries must contain the string 'abc'</div> 

<form method="POST"> 
    <input type="text" id="txt" /> 
    <input type="submit" id="enter" value="enter" style="color: grey;" /> 
</form> 

<script> 

    var PATTERN = /abc/; 

    $("#enter").hover(
    function() { 
     $("#message").css('visibility', $("#txt").val().match(PATTERN) ? 'hidden' : 'visible'); 
    }, 
    $.prototype.css.bind($("#message"), 'visibility', 'hidden') 
); 

    $('form').submit(function() { 
    return !!$("#txt").val().match(PATTERN); 
    }); 

    $('#txt').on('input', function() { 
    $("#enter").css('color', $("#txt").val().match(PATTERN) ? 'black' : 'grey'); 
    }); 

</script>