Javascript submit form onclick without checking all the input

Lionsure 2020-06-10 Original by the website

The form on the web page must check the text that is inputted by user, and the check is naturally done by javascript; but sometimes, the javascript code of the check form is clearly written and called, but there is no check or only a few, the form is submitted, some items are no check at all, that is, if it does not meet the requirements, it is submitted normally. The javascript code of the check is fake. Why does this happen?

Normally, in the javascript code, if the input meets the requirements, it returns "true", that is, passes the check to submit the form; if there is one that does not meet the requirements, it returns "false", asking the user to re-enter. In general, javascript does not check all the input content, the form is submitted, it is because the javascript code is wrong; when submitting the form, javascript starts to check the user input one by one, if the code that check the first few items is not wrong, it will check normally. When it continues to check, it suddenly encounter problem. javascript will immediately terminate the code execution and return. It does not return "false", so the form is submitted. This is also the reason the first few items can be checked normally and behind are not checked, the form is submitted.


Example(Javascript submit form onclick without checking all the input)

Html code:

<form method="get" action="test.htm">
              <ul class="ul">
                     <li>Nickname: <input type="text" id="inNi" maxlength="30" /></li>
                     <li>Password: <input type="password" id="inPwd" maxlength="30" /></li>
                     <li>Full Name: <input type="text" id="inName" maxlength="30" /></li>
                     <li><input type="submit" id="inSub" value=" Submit " onclick="return checkInput()" /><span id="msg"></span></li>


Css code:

.ul{margin:10px 0px; position:relative; border:1px solid #7b7a7a; width:350px; height:160px; line-height:30px;}
       .ul li{margin:6px 0 0 10px;}


Javascript code:

<script type="text/javascript">
       function checkInput() {
              var ni = document.getElementById("inNi"), pwd = document.getElementById("inPwd"), yName = document.getElementById("inName"),msg = document.getElementById("msg");

       if (ni.value == "") {msg.innerHTML = "Nickname should be filled!"; return false; }
              if (pwd.value == "") { msg.innerHTML = "Password can not be blank!"; return false; }

       if (yName == "") { msg.innerHTML = "Full Name cannot be empty!"; return false; }
              return true;

When the above javascript code is executed to check the "Full Name" is wrong, that is if (yName == "") is wrong, the execution is terminated immediately, the form is submitted without the last item being checked.