javascript form validation always returns true even when condition matches and should returns false

Question

I'm trying to make a javascript form validation based on Vikrant 's script on jsfiddle.

I have made my own script on jsfiddle too here it is pretty similar to his code but for some reason, the alert never triggers, the form is submitted even though it should not be.

this is happening in my localhost too.

also here is the code :

 function FormValidasi() { if (document.getElementById('cabang').value == "tor") { alert("Mohon pilih cabang nya"); return false; } else if (document.getElementById('tipe').value == "tor") { alert("Mohon pilih tipenya"); return false; } return (true); } 

 <form name="Formulir" method="post" action="2013.php" onsubmit="return FormValidasi();"> <input type="text" name="cabang" id="cabang" placeholder="Input cabang"> <br> <input type="text" name="tipe" id="tipe" placeholder="Input Tipe"> <input type="submit" name="submit" value="submit"> </form> 

so if I type "tor" inside both field, or just one of the field, the script should be returning false and prevent the form submitting? but the form is submitted even if I typed "tor"

Answer 1

The reason for not working your code is the line you've coded here as return (true); The code execution for your JS is check the IF conditions and return only one output from there. From the line where you always return true means script executes the IF statement but ultimately return true even you have an error on your input fields.

 function FormValidasi() { if (document.getElementById('cabang').value == "tor") { alert("Mohon pilih cabang nya"); return false; } else if (document.getElementById('tipe').value == "tor") { alert("Mohon pilih tipenya"); return false; } } 

 <form name="Formulir" method="post" action="2013.php" onsubmit="return FormValidasi();"> <input type="text" name="cabang" id="cabang" placeholder="Input cabang"> <br> <input type="text" name="tipe" id="tipe" placeholder="Input Tipe"> <input type="submit" name="submit" value="submit"> </form> 

Update 1

Reasonable argument has been made by 2 users and i have update the snippet to avoid getting error as below.

Uncaught ReferenceError: FormValidasi is not defined at HTMLFormElement.onsubmit

This can be avoid from making the form submit validation function as global function.

window.FormValidasi = FormValidasi;

Updated code:

 window.FormValidasi = FormValidasi; function FormValidasi() { if (document.getElementById('cabang').value == "tor") { alert("Mohon pilih cabang nya"); return false; } else if (document.getElementById('tipe').value == "tor") { alert("Mohon pilih tipenya"); return false; } } 

 <form name="Formulir" method="post" action="2013.php" onsubmit="return FormValidasi();"> <input type="text" name="cabang" id="cabang" placeholder="Input cabang"> <br> <input type="text" name="tipe" id="tipe" placeholder="Input Tipe"> <input type="submit" name="submit" value="submit"> </form> 

Read more about the function error on onsubmit function is not defined

Update 2

Thanks to giving a thought on looking at the code again. The OP had the function correctly defined. As the problem was his function not executing properly was entirely due to js mishap. It can be avoided by making the function global .

Answer 2

To summarize the previously accepted answer and its comments, the correct code should be:

Javascript

window.FormValidasi = FormValidasi;

function FormValidasi() {
  if (document.getElementById('cabang').value == "tor") {
    alert("Mohon pilih cabang nya");
    return false;
  } else if (document.getElementById('tipe').value == "tor") {
    alert("Mohon pilih tipenya");
    return false;
  }
  return true;
}

HTML

<form name="Formulir" method="post" action="2013.php" onsubmit="return FormValidasi();">
  <input type="text" name="cabang" id="cabang" placeholder="Input cabang">
  <br>
  <input type="text" name="tipe" id="tipe" placeholder="Input Tipe">
  <input type="submit" name="submit" value="submit">
</form>

The problem was not the last line of the function being executed to always return true as stated in the first paragraph of the accepted answer, but rather that there was a coding error preventing the function from being executed in the first place.