Почему обязательный атрибут в html не работает?

Question

Я хотел попробовать проверить ввод перед его отправкой, поэтому я использовал обязательный атрибут в конце ввода, но он не работает, и я уже попробовал некоторые из рекомендуемых решений, такие как перенос ввода в тег формы или попытка закройте тег input (), но когда я отправляю свою форму с пустым вводом, она все равно отправляется нормально и не объявляет обязательное поле. Буду признателен за любую помощь, спасибо! это часть моего кода

<form id="form" style="background-color:honeydew ;" class="container text-center">

    <div><br><h2> Contact Us </h2></div>
    <div id="contact">
        <div> 
            <label> Name</label>
            <input type="text" placeholder="Your name " name="name" required/>
        </div>
        <br>
        <div> 
            <label> Email</label>
            <input type="email" placeholder="name@gmail.com" name="email" name="email">
        </div>
        <br>
        <div> 
            <label> Message</label>
            <input type="text" style="height:50px;" name="message">
        </div>
        <br>
        <div><input type="button" value="submit" name="submit"><br></div>
        <br>
    </div>
    <br>

</form>

, и это файл javascript, связанный с ним:

//we take informations subbmitted by user from the form and we replace the form with a reply
//containing these pieces of information on the click on the submit button
var form=document.getElementById('form'),
    contactForm=document.getElementById('contact'),
    submitButton=contactForm.children[6].children[0];

var processForm= function(){

    name=document.getElementsByName('name')[0].value,
    email=document.getElementsByName('email')[0].value,
    sitereplyText=document.createTextNode('this is a initialiazing value'),
    sitereplyEl=document.createElement('p');

    mytext= 'Hey '+name+'! Thanks for your message :)  We will email you back at '+email;
    sitereplyText.nodeValue=mytext;
    sitereplyEl.appendChild(sitereplyText);
    form.replaceChild(sitereplyEl,contactForm);
}


submitButton.addEventListener('click',processForm);

Answer 1

Итак, я сначала исправил тип ввода в submit

<input type="submit" value="submit" name="submit">

, затем в файле javascript я изменил

submitButton.addEventListener('click',processForm); 

на

submitButton.addEventListener('form.submit()',processForm);

и похоже на работу :)