Включить кнопку «Отключено», если ввод не пуст

У меня есть одна простая форма, в которой есть два поля, называемые именем с идентификатором fname и полем электронной почты с адресом электронной почты. У меня есть кнопка отправки с идентификатором submit-btn. Я отключил кнопку отправки, используя javascript, подобный этому

document.getElementById("submit-btn").disabled = true;

Теперь я ищу разрешить отправку, если оба моих поля заполнены.

Мой полный javascript такой

<script type = "text/javascript">
  
   document.getElementById("submit-btn").disabled = true;

   document.getElementById("submit-btn").onclick = function(){
   window.open("https://google.com",'_blank');
}
  
</script>

Я изучаю javascript и не знаю, как я могу это сделать. Дайте мне знать, если кто-то здесь может помочь мне в этом. Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 050
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я бы предложил что-то вроде этого

  1. Используйте блок, который инкапсулирует имена переменных и функций внутри области блока
  2. Делайте небольшие функции, которые делают только одну вещь
  3. Предпочитайте addEventListeneronclick или onanything
  4. Есть два типа событий, которые вы можете использовать в inputs: ввод и изменение. input будет реагировать на каждое нажатие клавиши, check будет реагировать только на размытие элемента input
  5. Я добавил проверку на валидность в поле электронной почты методом checkValidity
    {
      const btn = document.getElementById("submit-btn");
      const fname = document.getElementById("fname");
      const email = document.getElementById("email");
      deactivate()
      
      function activate() {
        btn.disabled = false;
      }
      
      function deactivate() {
        btn.disabled = true;
      }
    
      function check() {
        if (fname.value != '' && email.value != '' && email.checkValidity()) {
          activate()
        } else {
          deactivate()
        }
      }
      
      btn.addEventListener('click', function(e) {
        alert('submit')
      })
      
      
      fname.addEventListener('input', check)
      email.addEventListener('input', check)
      
    }
    <form>
      <input type = "text" name = "" id = "fname">
      <input type = "email" name = "" id = "email">
      <input type = "submit" id = "submit-btn" value = "Submit">
    </form>

Это самое простое решение, которое я могу себе представить:

myForm.oninput = () => {
  btn.disabled = fname.value == '' || email.value == '' || !email.checkValidity();
}
<form id = "myForm">
  <input type = "text" name = "" id = "fname">
  <input type = "email" name = "" id = "email">
  <input type = "submit" id = "btn" value = "Submit" disabled>
</form>

Лично я предпочитаю использовать регулярное выражение для проверки электронной почты вместо checkValidity(). Что-то вроде этого:

/^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/.test(email.value);

Другие вопросы по теме