爲什麼element.classList.add（'class-name'）;不管用？

Question

具備HTML（部分）：

<div class="modal-write-us"> 
    <form class="modal-write-us-form" action="" method="post"> 
    <label> 
     <input type="text" name="user-name" required> 
    </label> 
    <label> 
     <input type="text" name="e-mail" required> 
    </label> 
    <label for="text-field"></label> 
    <textarea name="text" rows="5" id="text-field" required></textarea> 
    </form> 
    <div class="modal-write-us-button"> 
    <button class="btn btn-red" type="submit">Submit</button> 
    </div> 
</div> 

我需要添加類「模態錯誤」爲div.modal，寫我們，如果提交的表單有空場/場。

JS：

var modalWriteUs = document.querySelector('.modal-write-us'); 
var form = modalWriteUs.querySelector('form'); 
var userName = modalWriteUs.querySelector('[name=user-name]'); 
var eMail = modalWriteUs.querySelector('[name=e-mail]'); 
var textArea = modalWriteUs.querySelector('[name=text]'); 

form.addEventListener('submit', function(event) { 
    if (!userName.value || !eMail.value || !textArea.value) { 
    event.preventDefault(); 
    modalWriteUs.classList.add('modal-error'); 
    } 
}); 

但是類不會被添加。我的錯誤在哪裏？

Answer 1

如果你把<button class="btn btn-red" type="submit">Submit</button>放在<form>裏面，它應該可以工作。

看到工作Plunker。

<div class="modal-write-us"> 
    <form class="modal-write-us-form" action="" method="post"> 
    <label> 
     <input type="text" name="user-name" required> 
    </label> 
    <label> 
     <input type="text" name="e-mail" required> 
    </label> 
    <label for="text-field"></label> 
    <textarea name="text" rows="5" id="text-field" required></textarea> 
    <div class="modal-write-us-button"> 
     <button class="btn btn-red" type="submit">Submit</button> 
    </div> 
    </form> 
</div> 

編輯：更多解釋here：

用於創建控件通常出現一個FORM元件內的元件，但也可能會出現一個FORM元素聲明之外使用它們時構建用戶界面。這在內部事件部分討論。請注意，表單外的控件不能成功控制。