JavaScript , validate html form for both onkeyup and submit

Question

I've see a lot of solution and questions similar to this but none of them helped me out

here is a simple html form with JavaScript validation

log error message on key up when the value of input fields are less than required length (less than 5)

log error message on submit when input fields are empty (first Name and last Name)

problem is when I click submit button form is submitted regardless of errors

I have tried preventDefault() and return false but none of them worked out

how can I improve the code to make them work correctly? for both key up and submit

let fname = document.getElementById('fname');
let lname = document.getElementById('lname');
form = document.querySelector('#myForm');

function checkFirstName() {
  let valid = true;
  if (fname.value.length < 5) {
    console.log('first name must be greater than 5');
    valid = false;
  }
}

function checkLastName() {
  let valid = true;
  if (lname.value.length < 5) {
    console.log('last name must be greater than 5');
    valid = false;
  }
}
form.addEventListener('input', function(e) {
  switch (e.target.id) {
    case 'fname':
      checkFirstName();
      break;
    case 'lname':
      checkLastName();
      break;
  }
});

form.addEventListener('submit', function(e) {
  let isFormField = true;
  if (fname.value === '') {
    console.log('first name is required')
    isFormField = false;
  }
  if (lname.value === '') {
    console.log('last name is required')
    isFormField = false;
  }
  if (!isFormField) {
    e.preventDefault();
    return
  }
});

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

There's a "Tidy" button in the snippet editor. Please use it before you add the snippet to your question. — Andreas
– Andreas, Commented Sep 4, 2021 at 14:33
You are only calling checkFirstName and checkLastName on input event. If user submit form then you are not validating the inputs. — DecPK
– DecPK, Commented Sep 4, 2021 at 14:38
@HR01M8055 when I use it outside the if condition it stops the from submission even if there is no errors — william williams
– william williams, Commented Sep 4, 2021 at 14:39

DecPK · Accepted Answer · 2021-09-04 14:49:49Z

1

I've moved all the validation of firstname in the function checkFirstName and lastname in checkLastName. Just to be concise

You can make it separate, But you have to remember that form will only submit if checkFirstName and checkLastName returns true

let fname = document.getElementById('fname');
let lname = document.getElementById('lname');
form = document.querySelector('#myForm');

function checkFirstName() {
  if (fname.value.length >= 5) return true;
  if (fname.value === "") {
    console.log('Last name is required')
    return false
  }
  console.log('first name must be greater than 5');
  return false;
}

function checkLastName() {
  if (lname.value.length >= 5) return true;
  if (lname.value === "") {
    console.log('Last name is required')
    return false
  }
  console.log('last name must be greater than 5');
  return false;
}
form.addEventListener('input', function(e) {
  switch (e.target.id) {
    case 'fname':
      checkFirstName();
      break;
    case 'lname':
      checkLastName();
      break;
  }
});

form.addEventListener('submit', function(e) {
  if (!checkFirstName() || !checkLastName()) {
    e.preventDefault();
    return
  }
});

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

answered Sep 4, 2021 at 14:49

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

5 Comments

william williams Over a year ago

can you write the same code and put e.preventDefault(); outside the if condition?

DecPK Over a year ago

This code also works, What's wrong with this?

william williams Over a year ago

nothing wrong you asked me why I use it inside if condition, I thought you have better solution of using it outside if condition

DecPK Over a year ago

I apologize for that, I was thinking something wrong. But this solution will work for you.

DecPK Over a year ago

Would you mind accepting my answer if it solved your issue?

Collectives™ on Stack Overflow

JavaScript , validate html form for both onkeyup and submit

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related