html form validation using javascript

Question

i am trying to validate my html form using javascript. the validation works but it still submits. ie. when clicking submit a text will appear saying "first name is required" but then still submits.

here is the javascript code:

function validateForm(form) {
    formValid = true;
    for(i = 0; i < form.length; i++) {
        if(!requiredInput(form[i])) 
            formValid = false;
        }
return formValid;


}

function requiredInput(element) {
    if(!element.value.length) {
        document.getElementById(element.id + 'Error').style.display = "inline-block";
        return false;
    } else {
        document.getElementById(element.id + 'Error').style.display = "none";
       return true;
    }
return;

}

and here is the html code for the form:

<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get" onsubmit="return validateForm(this);">
        <h2>Validate you name:</h2>
        <div>
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
            <span class="error" id="fnameError">First Name is Required</span>
        </div>
        <div>
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
            <span class="error" id="lnameError">Last Name is Required</span>
        </div>
        <div>
            <hr>
        </div>
        <div>
            <input type="submit" value="Submit" name="submit" >
        </div>

    </form>

im not sure why it still submits. EDIT: i need to debug this code and not change all of it EDIT: i can not change the html code for this, i am to debug the javascript only

Answer 1

I think you need validate if its type submit :

    function validateForm(form) {

        formValid = true;
        for(i = 0; i < form.length; i++) {
            if(form[i].type != "submit"){
                if(!requiredInput(form[i])){
                    formValid = false;   
                }
            }

        }
        return formValid;

    }

Answer 2

  function validateForm(form) {
    formValid = true;
    try {
      for (i = 0; i < form.length; i++) {
        if (!requiredInput(form[i]))
          formValid = false;
      }
    } catch (error) {
      console.error("validateForm=>", error)
    }
    return formValid;
  }
  function requiredInput(element) {
    try {
      const elementInputError =  document.getElementById(element.id + 'Error');
      if (!element.value.length) {
        elementInputError && setDisplayError(elementInputError,"inline-block");
        return false;
      } else {
        elementInputError && setDisplayError(elementInputError,"none");
        return true;
      }
    } catch (error) {
      console.error("requiredInput=>", error)
      return false;
    }
  }
  function setDisplayError(element,value) {
    try {
      element.style.display =value;
    } catch (error) {
      console.error("setDisplayError=>", error)
    }
  }

  <form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get"
    onsubmit="return validateForm(this);">
    <h2>Validate you name:</h2>
    <div>
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
      <span class="error" id="fnameError">First Name is Required</span>
    </div>
    <div>
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
      <span class="error" id="lnameError">Last Name is Required</span>
    </div>
    <div>
      <hr>
    </div>
    <div>
      <input type="submit" value="Submit" name="submit">
    </div>

  </form>

The problem arose because it also validated the send button and because it did not have the termination of the failed id it could not find the item and an error occurred. Then when the error occurred it did not return anything the function and redirect you to the form action page.

Answer 3

Use preventDefault() to disable the submit.

function validateForm(event, form) {
    formValid = true;
    for (i = 0; i < form.length; i++) {
        if (!requiredInput(form[i])) {
            formValid = false;
            break;
        }

    }
    if (!formValid) {
        event.preventDefault();
    }
    return formValid;
}

And pass the event object in the onsubmit function like below.

<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get" onsubmit="validateForm(event, this);">

Answer 4

Actually You can do it simple way, see below,

1. Modify your HTML I remove onsubmit attribute and add form to ID

   <form id="dsds" action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get">
   <h2>Validate you name:</h2>
   <div>
       <label for="fname">First Name</label>
       <input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
       <span class="error" id="fnameError">First Name is Required</span>
   </div>
   <div>
       <label for="lname">Last Name</label>
       <input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
       <span class="error" id="lnameError">Last Name is Required</span>
   </div>
   <div>
       <hr>
   </div>
   <div>
       <input type="submit" value="Submit" name="submit" >
   </div>
   

2. Remove your JS function and do like this,

   $("#dsds").submit(function(e){
      //call your functions here
      return false; // return true if you want to submit the form
    });
   

See the example, JSFille

Answer 5

<form action="http://tl28dfdsdsserv.westernsydney.edu.au/twainfo/echo.php" method="get"
  onsubmit="return validateForm(event)">
<h2>Validate you name:</h2>
<div>
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname" placeholder="Given Name" onblur="requiredInput(this);">
    <span class="error" id="fnameError">First Name is Required</span>
</div>
<div>
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lname" placeholder="Surname" onblur="requiredInput(this);">
    <span class="error" id="lnameError">Last Name is Required</span>
</div>
<div>
    <hr>
</div>
<div>
    <input type="submit" value="Submit" name="submit">
</div>

<script type="text/javascript">
function validateForm(e) {
    form = e.target;
    formValid = true;
    for (i = 0; i < form.length; i++) {
        if (!requiredInput(form[i]))
            formValid = false;
    }
    return formValid;
}

function requiredInput(element) {
    if (element.type == 'submit') {
        return true;
    }
    if (element.value.length == 0) {
        document.getElementById(element.id + 'Error').style.display = "inline-block";
        return false;
    } else {
        document.getElementById(element.id + 'Error').style.display = "none";
        return true;
    }
}

this should work

Answer 6

Your validation has the correct structure, however, if there is any JavaScript error, the "return false" will not cancel the form submission.

Go to your developer console and manually invoke the validateForm function. You can give the form an ID:

<form id="myform"...

Then, you can reference this in the console:

validateForm(document.getElementById('form'));

You will see a JavaScript error. Fix the error and your form will be intercepted.