The onsubmit event handler javascript not working

Question

I have a problem. When I clicked the submit button nothing happens, even when I filled out the username and password with numbers (I don't want the username and password contains any number so I did make the condition for it), there is no alert display. I do not know where the problem comes from? Can you guys help me with this

Note: the reset function works fine

function validateInput() {
  var firstName = document.forms["sign_up"]["firstName"];
  var lastName = document.forms["sign_up"]["lastName"];
  var email = document.forms["sign_up"]["email"];
  var reg = /^[a-zA-Z]+$/;
  if (firstName.value !== '' || lastName.value !== '' || email.value !== '') {
    if (firstName.value.match(reg) && lastName.value.match(reg)) {
      alert("Form is submitted");
      // return true;
      return false; // for the demo, so it doesn't submit
    } else {
      if (firstName.value.match(reg) === false) {
        document.getElementById("error").innerHTML = "Numbers are not allowed in username";
        return false;
      } else if (lastName.value.match(reg) === false) {
        document.getElementById("error").innerHTML = "Numbers are not allowed in password";
        return false;
      }
    }
  }
}

function reset() {
  document.getElementById("first").innerHTML = "";
  document.getElementById("last").innerHTML = "";
  document.getElementById("email").innerHTML = "";
}

<form id="sign_up" onsubmit="return validateInput()">
  <p id="error"></p>
  <label for="firstName">First Name</label>
  <input type="text" id="firstName" value="" placeholder="Enter your first name">
  <label for="lastName">Last Name</label>
  <input type="text" id="lastName" value="" placeholder="Enter your last name">
  <label for="email">Email</label>
  <input type="email" id="email" value="" placeholder="Enter your email">
  <button type="submit">Submit</button>
  <button type="button" onclick="reset();">Cancel</button>
</form>

I think @MisterJojo means to change `id` to `name`. I would say to just add `name` attributes and keep the `id` ones as well — Phil, Sep 21 '20 at 04:08
Without `name` attributes, your form elements won't submit. Nor will you be able to reference them by `document.forms["sign_up"]["firstName"]` (your `
` needs a name for that one too). — Phil, Sep 21 '20 at 04:09
Ran the same piece of code and the reset function does not have a closing parenthesis. Just provided that and the alert began to show up. — Dhruv, Sep 21 '20 at 04:14
Your function has an undefined return path. You should add `return false` at the end — Phil, Sep 21 '20 at 04:16
I put name attributes for the input already but the problem still there — BeefNoodle, Sep 21 '20 at 04:16
But `validateInput` does nothing. I mean you can see effect of `reset`, but not of `validateInput`. Try to put `console.log("Hello")` at first line inside the function. — Talgat Saribayev, Sep 21 '20 at 04:27
The console display Hello when I clicked submit but I do not know why it does not work for the others? — BeefNoodle, Sep 21 '20 at 04:34
@BeefNoodle not sure if you have seen my answer below - all working for you and code fixed up. — Always Helping, Sep 21 '20 at 04:38

Rabby · Answer 1 · 2020-09-21T04:32:51.293

Use the Pattern attribute in input for validation like below

<input type="text" id="firstName" value="" pattern="[^0-9]*" title="Numbers are not allowed" placeholder="Enter your first name">

for more references: https://www.w3schools.com/tags/att_input_pattern.asp

And for reset functionality use reset

<input type="reset" value="reset">

It's better than create a special function for it and it saves your number of lines:-)

Always Helping · Accepted Answer · 2020-09-21T04:37:08.233

First, try to avoid to inline event handlers as they are not rec-emended at all. Also to reset form values you can simply use reset() method on the form.

Also, do not use innerHTML just to set the text of your error. You can use textContent instead which is better fit in your example.

You can use addEventListener with submit event to check for validation on your firstname and lastname.

I have fixed your code and its all working as expected.

Live Working Demo:

let form = document.getElementById("sign_up")
var firstName = document.getElementById("firstName")
var lastName = document.getElementById("lastName")
var email = document.getElementById("email")
var reset = document.getElementById("clearValues")
var reg = /^[a-zA-Z]+$/;

form.addEventListener('submit', function(e) {
  e.preventDefault()
  if (firstName.value != '' || lastName.value != '' || email.value != '') {
    if (firstName.value.match(reg) && lastName.value.match(reg)) {
      alert("Form is submitted");
    } else if (!firstName.value.match(reg)) {
      document.getElementById("error").textContent = "Numbers are not allowed in username";
    } else if (!lastName.value.match(reg)) {
      document.getElementById("error").textContent = "Numbers are not allowed in password";
    }
  }
})

reset.addEventListener('click', function(e) {
  document.getElementById("sign_up").reset();
})

input {
  display:block;
}

<head>
</head>
<body>
  <form id="sign_up" action="#">
    <p id="error"></p>
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" value="" placeholder="Enter your first name">
    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" value="" placeholder="Enter your last name">
    <label for="email">Email</label>
    <input type="email" id="email" value="" placeholder="Enter your email">
    <button type="submit">
       Submit
     </button>
    <button type="button" id="clearValues" onclick="reset();">
       Cancel
     </button>
  </form>
</body>

score 0 · Answer 3 · answered Sep 21 '20 at 04:05

0

You don't need to return a function in onsubmit event. This should work fine.

 <form id="sign_up" onsubmit="validateInput()">

Reference: https://www.w3schools.com/jsref/event_onsubmit.asp

answered Sep 21 '20 at 04:05

Dhruv

149
4

This is incorrect. See these two examples; [without return](https://jsfiddle.net/rjb3k4us/) vs [with return](https://jsfiddle.net/rjb3k4us/1/) – Phil Sep 21 '20 at 04:11

The onsubmit event handler javascript not working

3 Answers3