Form submits instead of displaying error when button is clicked

I have made a form as index.html. I have a from validation using JavaScript. When the submit button is clicked it must open another html page(detail.html). When I supply wrong data, it must prevent the opening of detail.html page and display the error messages but neither of them happens .

here is the code

<form action="/detail" method="POST" role="form" name="index" onsubmit="return validateForm()" enctype="application/x-www-form-urlencoded">
    <label for="name">Name</label>
    <input type="text" name="name" placeholder="Enter your name" required/>
    <span class="formerror"></span>
    <br />
    <label for="phone_number">Mobile:</label>
    <input type="number" name="phone_number" placeholder="enter your mobile number" required >
    <span class="formerror"></span>
    <br/>
    <label for="password">Password:</label>
    <input type="password" name="password" placeholder="enter your password" required  />
    <span class="formerror"></span>
    <br />
    <button id="btnsubmit" class="btn" onclick="submit">Submit</button>

code for form validation

<script>
    function clearErrors(){
        errors=document.getElementsByClassname('formerror');
        for(let item of errors){
            item.innerHTML="";
        }
    }
    function seterror(id,error){
        //sets error inside tag of id
        element=document.getElementById(id);
        element.getElementsByClassName('formerror')[0].innerHTML=error;
    }
    function validateForm(){
        var returnval = true;
        //performs validation and if validation fails, set the value of returnval to false.
        var name = document.forms['index']["name"].value;
        if(name.length<3)
        {
            seterror("name","length of name of too short");
            returnval=false;
        }
        var phone_number = document.forms['index']["phone_number"].value;
        if(phone_number.length!=10)
        {
            seterror("phone_number","phone number should be of 10 digits");
            returnval=false;
        }
        var password = document.forms['index']["password"].value;
        if(password.length<4)
        {
            seterror("password","password should be at least of 4 characters");
            returnval=false;
        }
        return returnval;
    }
</script>

I wanted the index.html to display the error messages when wrong data is fed to the input fields, but nothing of those happens instead detail.html page opens. detail.html must only open when correct input is given.

Solution

I changed your validation to use a sibling error message selected by a class selector, added some classes and CSS for that. Not perfect but shows how. Here I used the change event to clear the error.

Note I also added some validation attributes like minlength etc.

Many areas can be improved and made more robust here.

function getNextSibling(elem, selector) {
  //next sibling element
  let sibling = elem.nextElementSibling;
  //No selector, return the first sibling
  if (!selector) return sibling;
  // Sibling matches selector, use it; no? next sibling and continue loop
  while (sibling) {
    if (sibling.matches(selector)) {
      return sibling;
    }
    sibling = sibling.nextElementSibling;
  }
};

function clearErrors() {
  let errors = document.getElementsByClassname('formerror');
  for (let item of errors) {
    item.textContent = "";
  }
}

function seterror(element, error) {
  let errSib = getNextSibling(element, '.formerror');
  errSib.textContent = error;
}

function validateForm(event) {
  event.preventDefault();
  let returnval = true;
  //performs validation and if validation fails, set the value of returnval to false.
  let field = document.forms['index']["name"];
  let name = field.value;
  if (name.length < 3) {
    seterror(field, "Length of name of too short");
    returnval = false;
  } else {
    seterror(field, "");
  }
  field = document.forms['index']["phone_number"];
  let phone_number = field.value;
  if (phone_number.length != 10) {
    seterror(field, "Phone number should be of 10 digits");
    returnval = false;
  } else {
    seterror(field, "");
  }
  field = document.forms['index']["password"];
  let password = document.forms['index']["password"].value;
  if (password.length < 4) {
    seterror(field, "Password should be at least of 4 characters");
    returnval = false;
  } else {
    seterror(field, "");
  }
  return returnval;
}

document.forms.index.addEventListener('submit', e => {
  e.preventDefault();
  const isValid = validateForm(e);
  console.log('Submitting the form!', isValid);
  //note how this only fires when you have all validation pass
  // check here for an entirely valid form and then submit
  // left this as something yet to be done. (check for any non-value fields; several ways to do this.
});

document.forms.index.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.classList.add('invalid');
  validateForm(e);
}, true);

document.forms.index.addEventListener('change', e => {
  e.preventDefault();
  e.target.classList.remove('invalid');
  validateForm(e);
});

form {
  line-height: 2em;
}

.invalid {
  border: solid red 1px;
}

.formerror {
  border: solid red 1px;
  color: red;
  padding: 0.25em;
}

.formerror:empty {
  border: solid blue 1px;
  padding: 0em;
}

<form action="/detail" method="POST" role="form" name="index" enctype="application/x-www-form-urlencoded">
  <label for="name">Name</label>
  <input type="text" name="name" placeholder="Enter your name" required minlength="3" />
  <span class="formerror"></span>
  <br />
  <label for="phone_number">Mobile:</label>
  <input type="number" name="phone_number" placeholder="enter your mobile number" required minlength="10" maxlength="10">
  <span class="formerror"></span>
  <br/>
  <label for="password">Password:</label>
  <input type="password" name="password" placeholder="enter your password" required minlength="4" />
  <span class="formerror"></span>
  <br />
  <button id="btnsubmit" class="btn" type="submit">Submit</button>
</form>