
Javascript submit form onclick without checking all the input
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>
</ul>
</form>
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;
}
</script>
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.
-
Related Reading
- Javascript multidimensional array (create, add and r
- Remove text after clicking in the textbox and then d
- Javascript get referrer url(previous page url), curr
- Javascript get current url, domain from url, relativ
- Javascript convert hex to decimal, binary to hex, oc
- Remove html element javascript by their parent or cl
- Javascript get all input elements in form and all im
- Javascript create element(div,li,img,span) dynamical
- Mod operator and rounding off numbers in javascript
- Javascript img src path changes, with without id (ge
- Javascript show hide div onclick, onclick radio butt
- How to add onclick event in javascript dynamically f