Html - Form Validation is still submitting

ChrisReilly
January 18, 2024
153 views
2 votes
3 Answers

I have a form that validates and is working as expected but the form still submits even though it is prompting a validation error. Tried various different things but can’t seem to make it stop submitting the form with incorrect validation.

function Validate() {
  const name = document.forms.ValidateForm.name.value;
  console.log(name);

  if (name === "" ||
    name.includes('0') || name.includes('1') ||
    name.includes('2') || name.includes('3') ||
    name.includes('4') || name.includes('5') ||
    name.includes('6') || name.includes('7') ||
    name.includes('8') || name.includes('9')) {
    window.alert("Office Name cannot be Empty");
    name.focus();
    return false;
  }

  if (name.length < 3) {
    alert("Office Name must be more than 3 characters");
    name.focus();
    return false;
  }

  return true;
}

<form action="#" method="post" enctype="multipart/form-data" name="ValidateForm" onsubmit="return Validate();" id="ValidateForm">
  <input type="text" name="name" id="name">
  <input type="submit" value="Add Office">
</form>

Tags: html javascript

Answers

The issue in your code is because you’re calling the focus() method on the string returned from the input element, not the input itself. This is causing an error to be thrown which means that return false is never hit.

function Validate() {
  const nameField = document.forms.ValidateForm.name;
  const name = nameField.value;
  console.log(name);

  if (name === "" ||
    name.includes('0') || name.includes('1') ||
    name.includes('2') || name.includes('3') ||
    name.includes('4') || name.includes('5') ||
    name.includes('6') || name.includes('7') ||
    name.includes('8') || name.includes('9')) {
    window.alert("Office Name cannot be Empty");
    nameField.focus();
    return false;
  }

  if (name.length < 3) {
    alert("Office Name must be more than 3 characters");
    nameField.focus();
    return false;
  }

  return true;
}

<form action="#" method="post" enctype="multipart/form-data" name="ValidateForm" onsubmit="return Validate();" id="ValidateForm">
  <input type="text" name="name" id="name">
  <input type="submit" value="Add Office">
</form>

That being said, and as @mykaf mentioned in the comments, this issue, along with the quality of your code, can be improved by removing the inline onclick attribute and binding your event handler in JS.

Also note the use of a regular expression to check for an integer in the entered ‘name’ string.

const nameField = document.querySelector('#name');

document.querySelector('#ValidateForm').addEventListener('submit', e => {
  const name = nameField.value;
  if (name === "" || /[0-9]/.test(name)) {
    alert("Office Name cannot be Empty");
    e.preventDefault();
    nameField.focus();
  }
  else if (name.length < 3) {
    alert("Office Name must be more than 3 characters");
    e.preventDefault();
    nameField.focus();
  }
})

<form action="#" method="post" enctype="multipart/form-data" name="ValidateForm" id="ValidateForm">
  <input type="text" name="name" id="name">
  <input type="submit" value="Add Office">
</form>

Maybe you need to use preventDefault().

<form action="#" method="post" enctype="multipart/form-data" name="ValidateForm" onsubmit="Validate(e);" id="ValidateForm">
  <input type="text" name="name" id="name">
  <input type="submit" value="Add Office">
</form>

function Validate(e) {
  e.preventDefault();
  const name = document.forms.ValidateForm.name.value;
  console.log(name);

  if (name === "" ||
    name.includes('0') || name.includes('1') ||
    name.includes('2') || name.includes('3') ||
    name.includes('4') || name.includes('5') ||
    name.includes('6') || name.includes('7') ||
    name.includes('8') || name.includes('9')) {
    window.alert("Office Name cannot be Empty");
    name.focus();
    return false;
  }

  if (name.length < 3) {
    alert("Office Name must be more than 3 characters");
    name.focus();
    return false;
  }

  return true;
}

Use Event::preventDefault() to halt the form’s submission. Also call focus() on the input, not its value.

You can use try/catch to avoid code duplication.

Also your error messages could be more descriptive:

const nameField = document.querySelector('#name');

document.querySelector('#ValidateForm').addEventListener('submit', e => {
  const {value} = nameField;
  try {
    if (/[0-9]+/.test(value)) throw 'Office name cannnot contain digits';
    if (value.length < 3) throw 'Office Name must be more than 3 characters';
  } catch (m) {
    alert(m);
    e.preventDefault();
    nameField.focus();
  }
})

sdf

<form action="#" method="post" enctype="multipart/form-data" name="ValidateForm" id="ValidateForm">
  <input type="text" name="name" id="name">
  <input type="submit" value="Add Office">
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Form Validation is still submitting

Answers