Метод window.onload, как вызвать несколько функций

Question

Написание JavaScript, чтобы форма не отправлялась меньше полей, и если пользователь этого не сделал, появляется сообщение: «Пожалуйста, заполните поле имени 'или' заполните поле электронной почты 'и т. д. Я пишу отдельную функцию для каждого поля (не знаю, правильно ли это), и когда я добавляю каждую функцию в window.onload, она появляется только с одно из сообщений. Будем признательны любому совету.

HTML

<form id="frmContact" name="frmContact" method="post" action="thanks.htm"> 
    <fieldset id="quickSupport"> 
     <legend><strong>Quick Support</strong></legend> 
     <p> If your request isn't urgent, drop us a quick line and we'll get back to you within 24 hours </p> 
     <p> 
     <label for="name">Name:</label> 
     <input type="text" value="Your Name" name="name" id="name" tabindex="10" /> 
     </p> 
     <p> 
     <label for="email">Email:</label> 
     <input type="text" value="Your Email" name="email" id="email" tabindex="20" /> 
     </p> 
     <label for="comments">Comments </label> 
     <br /> 
     <textarea name="comments" value="Message" id="comments" cols="45" rows="5" tabindex="60" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">Message</textarea> 
     </p> 
     <p> 
     <input type="submit" name="submit" id="submit" value="Send" tabindex="70" /> 
     </p> 
    </fieldset> 
    </form> 

    <p><span id="errorMessage"></span></p> 
    <p><span id="errorMessage1"></span></p> 

JavaScript

function prepareEventHandlers() { 
document.getElementById("frmContact").addEventListener("submit", function(event) { 

     // Show message 
     if (document.getElementById("email").value == "Your Email") { 
      document.getElementById("errorMessage").innerHTML = "Please provide at least an email address!"; 
      // to STOP the form from submitting 
      return false; 
     } else { 
      // reset and allow the form to submit 
      document.getElementById("errorMessage").innerHTML = ""; 
      return true; 
     } 

     event.preventDefault(); // Prevent form from submitting 
    } 
}); 
} 

function prepareEventHandlersName() { 
document.getElementById("frmContact").addEventListener("submit",   function(event) { 

     // Show message 
     if (document.getElementById("name").value == "Your Name") { 
      document.getElementById("errorMessage1").innerHTML = "Please provide a name!"; 
      // to STOP the form from submitting 
      return false; 
     } else { 
      // reset and allow the form to submit 
      document.getElementById("errorMessage1").innerHTML = ""; 
      return true; 
     } 

     event.preventDefault(); // Prevent form from submitting 
    } 
}); 
} 


function start() { 
prepareEventHandlers(); 
prepareEventHandlersName(); 
} 

window.onload = пуск;

Answer 1

Необходимо использовать встроенные атрибуты проверки браузера.

<form id="frmContact" name="frmContact" method="post" action="thanks.htm"> 
    <fieldset id="quickSupport"> 
     <legend><strong>Quick Support</strong></legend> 
     <p>If your request isn't urgent, drop us a quick line and we'll 
      get back to you within 24 hours</p> 
     <p> 
      <label for="name">Name:</label> 
      <input type="text" value="Your Name" name="name" id="name" 
       tabindex="10" required /> 
     </p> 
     <p> 
      <label for="email">Email:</label> 
      <input type="text" value="Your Email" name="email" id="email" 
       tabindex="20" required /> 
     </p> 
     <label for="comments">Comments</label> 
     <br /> 
     <textarea name="comments" value="Message" id="comments" cols="45" 
      rows="5" tabindex="60" 
      placeholder="PLACEHOLDER WHEN NO MESSAGE IS WRITTEN" required>Message</textarea> 
     </p> 
     <p> 
      <input type="submit" name="submit" id="submit" value="Send" 
       tabindex="70" /> 
     </p> 
    </fieldset> 
</form>

При попытке отправить форму браузер автоматически отобразит на вашем компьютере сообщения об ошибках на языке пользователя. Нет необходимости в JavaScript.

---

Причина ваш код не удается, потому что

document.getElementById("frmContact").onsubmit = ... 

перекроет вы добавили все предыдущие onsubmit обработчик.

Вместо этого вы должны добавить .addEventListener(), если хотите добавить несколько функций.

Более правильным способом было бы создать единую функцию, выполняющую все проверки, и прикрепить ее как обработчик.

Answer 2

Обе функции запущены, но вы перезаписываете обработчик onsubmit для frmContact в своей второй функции. Чтобы этого избежать, не назначайте обработчики событий таким образом. Вместо этого используйте addEventListener.

document.getElementById("frmContact").addEventListener("submit", function(event) { 
    if (document.getElementById("email").value == "Your Email") { 
     // Show message 
     event.preventDefault(); // Prevent form from submitting 
    } 
}); 

Обратите внимание, что когда вы делаете это таким образом, вы не можете помешать отправке формы, просто вернув false. Вместо этого вы должны использовать метод preventDefault события.