validate simple html form with JavaScript

Question

Simple html form with some JavaScript code to check if user name is empty and then display error message otherwise submit the form.

First part works fine when the user name is empty.

Second part does not work once I click the submit button when the user name is not empty.

What is wrong with the code and how can I submit the form correctly?

let userName = document.getElementById('uname');
let form = 
document.querySelector('#myForm');
form.addEventListener('submit',function(e){
e.preventDefault();
    if(userName.value === ''){
       alert('user name is required');
          }
      });

<form method="get" id="myForm">
<div>
<input type="text" class="form-control" id="uname" name="uname">
</div>
<button type="submit" name="submit">send</button>
</form>

in the submit function you havent write any code if the username is not null..there should be an else part and there you need to write what you want with your form — Aashiq Otp, Sep 03 '21 at 10:33
Also [NEVER call anything submit in a form](https://stackoverflow.com/questions/22982741/form-submit-jquery-does-not-work/22982900#22982900) — mplungjan, Sep 03 '21 at 10:44

Alireza Ahmadi · Answer 1 · 2021-09-03T10:43:26.220

1

That is because of using preventDefault. You are calling e.preventDefault(); even there is no error while you just need to call the function when form is not valid.

So put e.preventDefault(); in if part

let userName = document.getElementById('uname');
let form = 
document.querySelector('#myForm');
form.addEventListener('submit',function(e){

    if(userName.value === ''){
       alert('user name is required');
       e.preventDefault();
          }
      });

<form method="get" id="myForm">
<div>
<input type="text" class="form-control" id="uname" name="uname">
</div>
<button type="submit" name="submit">send</button>
</form>

edited Sep 03 '21 at 10:43

answered Sep 03 '21 at 10:35

Alireza Ahmadi

8,579
5
15
42

1

@JustinWilliam this is what you want? Always you call `e.preventDefault();` even there is no error. you just need call the function when form is not valid – Alireza Ahmadi Sep 03 '21 at 10:40
@JustinWilliam `what if i have many field will i suppose to call e.preventDefault() in every block?` No you need to create `isValid` function that return `true` or `false` based on the fact that your form is valid or not and in `false` case call `preventDefault` – Alireza Ahmadi Sep 03 '21 at 11:21

score 0 · Answer 2 · answered Sep 03 '21 at 10:56

You need to conditionally call the e.preventDefault() so that it doesn't prevent the submit behaviour of the form. You only need to prevent the form submit behaviour while showing the alert box. preventDefault() will tell the browser to avoid the default action of the form (submit action)

Harshit Rastogi · Accepted Answer · 2021-09-03T10:57:10.350

-1

Move preventDefault in the condition where the username is empty:

let userName = document.getElementById('uname');
let form = 
document.querySelector('#myForm');
form.addEventListener('submit',function(e){

    if(userName.value === ''){
       alert('user name is required');
          e.preventDefault();
          } 
      });

<form method="get" id="myForm">
<div>
<input type="text" class="form-control" id="uname" name="uname">
</div>
<button type="submit" name="submit">send</button>
</form>

edited Sep 03 '21 at 10:57

answered Sep 03 '21 at 10:39

Harshit Rastogi

1,996
1
10
19

1

oops the aim is to submit the form when user name is not empty and not output the value of user name – willy Sep 03 '21 at 10:51
what if i have many field will i suppose to call e.preventDefault() in every block ? – willy Sep 03 '21 at 11:02
You might want to create separate validator function – Harshit Rastogi Sep 03 '21 at 11:43

validate simple html form with JavaScript

3 Answers3