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

i think you also validate the submit input in form.

rrsantos
– rrsantos

2019-12-05 02:38:06 +00:00
Commented Dec 5, 2019 at 2:38 — rrsantos
– rrsantos, Commented Dec 5, 2019 at 2:38

rrsantos · Accepted Answer · 2019-12-06 06:03:58Z

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;

    }

edited Dec 6, 2019 at 6:03

answered Dec 5, 2019 at 2:41

rrsantos

4354 silver badges15 bronze badges

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

Comments

Ian Heisler · Accepted Answer · 2019-12-05 02:32:30Z

1

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.

answered Dec 5, 2019 at 2:32

Ian Heisler

1116 bronze badges

Comments

Ukesh Shrestha · Accepted Answer · 2019-12-05 02:55:00Z

<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

shalitha senanayaka · Accepted Answer · 2019-12-05 02:55:27Z

Actually You can do it simple way, see below,

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>

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

Sohail Ashraf · Accepted Answer · 2019-12-05 02:59:31Z

0

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);">

edited Dec 5, 2019 at 2:59

answered Dec 5, 2019 at 2:35

Sohail Ashraf

10.7k3 gold badges31 silver badges43 bronze badges

2 Comments

Sohail Ashraf Over a year ago

I have made the changes in the ans. Pass the event object in the submit function and then use preventDefaut().

Sohail Ashraf Over a year ago

And please note that, break your loop once we get an invalid input. otherwise it will not work as if the last element in the form is valid.

devmiguelopz · Accepted Answer · 2019-12-05 03:00:52Z

  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.

Collectives™ on Stack Overflow

html form validation using javascript

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related