CODEWITHSUNDEEP
javascripthtmlforms
Citra45Abadi
Citra45Abadi

Reputation: 207

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

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"

Upvotes: 0

Views: 1404

Answers (2)

FKEinternet
FKEinternet

Reputation: 1060

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.

Upvotes: 1

Kakashi Hatake
Kakashi Hatake

Reputation: 3054

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.

Upvotes: 1

Related Questions