Using JavaScript to check for user-input

Question

I'm submitting a form with input text to my server through my web client. What I'm trying to do is to check whether the user has passed in text into the input field before sending the form by hitting the submit button.

What I have tried so far:

var form = document.getElementById("id");

document.getElementById("id").addEventListener("click", function() {
  var input = document.getElementById("content").value;
  if (input == "") {
    alert("write something in the textfield");
  } else {
    form.submit();
  }
});

<form action="" method="post" id="id">
  <input type="text" name="name" id="content">
  <button type="submit" id="submit-id">submit text</button>
</form>

Any good tips on how to do this?

mplungjan · Accepted Answer · 2020-10-13 14:47:46Z

2

You want preventDefault on the submit event

document.getElementById("id").addEventListener("submit", function(e) {
  const input = document.getElementById("content").value;
  if (input.trim() === "") {
    alert("write something in the textfield");
    e.preventDefault()
  }
});

<form action="" method="post" id="id">
  <input type="text" name="name" id="content">
  <button type="submit" id="submit-id">submit text</button>
</form>

Alternatively just add required attribute - no need for script:

<form action="" method="post" id="id">
  <input type="text" name="name" id="content" required>
  <button type="submit" id="submit-id">submit text</button>
</form>

answered Oct 13, 2020 at 14:47

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

saidul islam nayan · Accepted Answer · 2020-10-13 15:06:44Z

0

you can use the simple code snippet instead :

    <form action="" method="post" id="id">
      <input type="text" name="name" id="content" required>
      <button type="submit" id="submit-id">submit text</button>
    </form>

edited Oct 13, 2020 at 15:06

answered Oct 13, 2020 at 14:59

saidul islam nayan

296 bronze badges

Comments

Zulkarneyn Yavas · Accepted Answer · 2020-10-13 16:19:53Z

0

function submitIt(e) {
  var formData = new FormData(e);
  var object = {};
  formData.forEach(function(value, key) {
    object[key] = value;
  });
  if (object.name == "") {
    alert("null");
  } else {
    alert("ok");
    return true;
  }
  return false;
}

<form onsubmit="return submitIt(this)">
  <input type="text" name="name">
  <button>submit text</button>
</form>

edited Oct 13, 2020 at 16:19

answered Oct 13, 2020 at 15:00

Zulkarneyn Yavas

12 bronze badges

1 Comment

epascarello Over a year ago

Code would still submit

Collectives™ on Stack Overflow

Using JavaScript to check for user-input

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related