Javascript отключить кнопку отправки, если только все html проверки не выполнены

Question

У меня есть простая форма:

<form role="form" enctype="multipart/form-data">
  <div>
    <div>
      <span>Name</span> 
      <input type="text" placeholder="Estate name..." id="Editname" required />
    </div>

    <div>
      <span>Address</span> 
      <input type="text" placeholder="Address..." id="Editaddress" required />
    </div>

    <div>
      <span>Upload</span> 
      <input type="file" placeholder="Upload File..." id="Editupload" required />
    </div>
  </div>

  <div>
    <div>
      <span>@@</span> 
      <input type="email" placeholder="Email..." id="Editemail" required />
    </div>

    <div>
      <span>Tel</span> 
      <input type="tel" pattern="^\d{4}\d{3}\d{4}$" id="Editnumber" required placeholder="Phone no..." />
    </div>

    <div>
      <span>@@</span> 
      <input type="submit" class="form-control btn btn-primary" id="EditfileUpload" required />
    </div>
  </div>
</form>

Каждое из этих полей имеет обязательную и некоторую проверку.

Я хочу отключить кнопку «Отправить», когда пользователь вводит для Например, электронное письмо в правильном формате, правильная длина номера телефона и т. д. c.

Как я могу сделать это с JavaScript?

Answer 1

JQuery validate будет моим первым выбором. Если вы не хотите использовать стороннюю библиотеку, отмените действие кнопки отправки.

document.getElementById('EditfileUpload').addEventListener('click', function(e){
    e.preventDefault();
    // do your validation checks here.

    document.forms['myform'].submit();

});