Html form validation with javascript before submit

Question

I want a simple program that shows an alert if a user updates a form and it's not more than 8 charterers long. I've tooled around trying to use the "onformchange" function and such, but I couldn't get it to work. I've heard about ajax but don't know how to integrate it into my problem. Any help would be great.

Mohamed Magdy · Accepted Answer · 2018-02-18 20:28:25Z

1

please,use the following guide to validate your form: W3Schools

answered Feb 18, 2018 at 20:28

Mohamed Magdy

479 bronze badges

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

2 Comments

Seb Over a year ago

That is not the effect I am looking for, I want it to happen before I click anything. The second the user updates the form, it is validated.

Mohamed Magdy Over a year ago

each input has some events you can bind to fire the validation function such as blur,change .

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

document.getElementById("submit").onclick = function() {
  document.getElementById("output").innerHTML = "";
  if (document.getElementById("input").value.length < 8) {
    document.getElementById("output").innerHTML = "input too short";
  }
}

document.getElementById("input").onkeydown = function() {
  document.getElementById("output").innerHTML = "";
  if (document.getElementById("input").value.length < 8) {
    document.getElementById("output").innerHTML = "input too short";
  }
}

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input type="text" placeholder="some text" id="input">
        <input type="button" onclick="click()" value="submit" id="submit">
        <p id="output"></p>
    </body>
</html>

This will work, make sure to change the id's.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 18, 2018 at 21:03

Jojo

4292 gold badges6 silver badges11 bronze badges

2 Comments

Seb Over a year ago

This does work, but it works on click I want it to happen as the user is going through the form. So if he is done the first input, and progress is to the second, he'll then realise he cant use that username. Is it even possible to do it?

Jojo Over a year ago

Yes! It is, ill add it to the answer in a second

Collectives™ on Stack Overflow

Html form validation with javascript before submit

2 Answers 2

2 Comments

This will work, make sure to change the id's.

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

This will work, make sure to change the id's.

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related