javascript onsubmit is not correctly working

Question

All responses and help is greatly appreciated!

HTML:

<h1>CONTACT US</h1>
<form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
  <label for="name">NAME</label>
  <input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
  <label for="email">EMAIL</label>
  <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
  <label for="email">MESSAGE</label> 
  <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
  <p></p>
  <input type="submit" id="submit" value="SUBMIT MESSAGE">
</form>

JAVASCRIPT:

function validate() {
    var username = document.getElementById("contact-name").value;
    var email = document.getElementById("contact-email").value;

    if (username==="" || email==="") {
        alert("Please can you fill in all fields");
        return false;
    } else {
        return true;
    }
};

I want to make sure that the user fills in the fields. If they dont and they hit submit, I would like an alert message to appear: "Please can you fill in all fields". Instead, when they I click submit without filling in, it doesnt bring up alert. It sends them through to the "thank you for your comment" submission page. — CoderAz, Aug 28 '17 at 15:40
I am able to get the validation comments for both the input fields and also it is restricting to submit the page from the above code. what else you want in this ? — Rakesh Chouhan, Aug 28 '17 at 15:44
That is strange Rakesh. Thank you for your response. I'm not sure why my one is not bringing up the alert message. Could it have something to do with the browser I am using, which is firefox? — CoderAz, Aug 28 '17 at 15:46
Within the same html file. My script tag starts and ends Just before the final closing body tag — CoderAz, Aug 28 '17 at 16:00
You are defining the function in a scope not available to the document. See [here](https://jsfiddle.net/regvng2n/). If you change the definition from `function validate()` to `validate = function()` it should work. — Namaskar, Aug 28 '17 at 16:02
Thanks a lot! That has resolved the issue. This is my first ever website I am building so I am learning as I go along with mistakes. Appreciate the help. — CoderAz, Aug 28 '17 at 16:07
Possible duplicate of [javascript scope of function declarations](https://stackoverflow.com/questions/14665160/javascript-scope-of-function-declarations) — Namaskar, Aug 28 '17 at 16:14

score 0 · Answer 1 · answered Aug 28 '17 at 15:45

Are you sure you imported the file containing your Javascript into the HTML? See below:

function validate() {
    var username = document.getElementById("contact-name").value;
    var email = document.getElementById("contact-email").value;

    if (username==="" || email==="") {
        alert("Please can you fill in all fields");
        return false;
    } else {
        return true;
    }
}

<html>

<head>
</head>

<body>
  <h1>CONTACT US</h1>
  <form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
    <label for="name">NAME</label>
    <input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
    <label for="email">EMAIL</label>
    <input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
    <label for="email">MESSAGE</label>
    <textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
    <p></p>
    <input type="submit" id="submit" value="SUBMIT MESSAGE">
  </form>
  <script src="script.js"></script>
</body>

</html>

You don't want to include this function in $().ready. That will call the function immediately when the page is done loading. You want this function to be called every time the button is clicked, not when the page is loaded. Thus, you want to include your js like so --> `` — Howie, Aug 28 '17 at 19:57

javascript onsubmit is not correctly working

1 Answers1