表单验证问题

Question

I have a very strange problem. Inside form I have hidden input with value -1 and input field for username.

<form action="" method="POST" name="login" onSubmit="return Validate()">
  <input type="text" id="username"/>
  <input type="hidden" id="available" value="-1"/>
<  input type="submit" value="Send"/>
</form>

On submit function Validate() checks value of username input which mustn't be empty, and Validate() also checks value of available input which mustn't be valued -1.

function Validate(){

var a=document.getElementById("username").value;
var b=document.getElementById("available").value;

if(a=="" || a==null)
{
    alert("Username cannot be empty");
    return false;
}
else if(b<0)
{
    alert("Form isn't finished");
    return false;
}
else
{
    return true;
}
}

Problem is that Validate() works only if one condition is evalueted. If function Validate() contains only 1 var(a or b) and 1 if order(without else if) it works correctly. But when I put it like this, when Validate uses a and b variables and if, else if conditional order it won't work. Really od.. Thanks in advance...

In this case it works:

function Validate(){

var a=document.getElementById("username").value;

if(a=="" || a==null)
{
    alert("Username cannot be empty");
    return false;
}
else
{
    return true;
}
}

Answer 1

<input type="hidden" id="available" value="-1"/>

Here the value is of string dataType. Whereas

else if(b<0)  //b is string dataType 

Hence it failed. so change it as

var b= Number(document.getElementById("available").value);

---

Try like this HTML:

<form action="" method="POST" name="login">
    <input type="text" id="username" />
    <input type="hidden" id="available" value="1" />
    <input type="button" value="Send" onClick="return Validate()" />
</form>

JS:

function Validate() {
    var a = document.getElementById("username").value;
    var b = Number(document.getElementById("available").value);
    if (a == "" || a == null) {
        alert("Username cannot be empty");
        return false;
    } else if (b < 0) {
        alert("Form isn't finished");
        return false;
    } else {
        document.login.submit();  //dynamically submit the form
    }
}

Answer 2

If you are wanting to get error notifications for each input don't use if/else here, use multiple if's and set your errors

function validate(){
   var a=document.getElementById("username").value;
   var b=document.getElementById("available").value;
   var errors = [];

   if(a=="" || a==null){
      errors.push("Invalid username");
   }
   if(b<0 || isNaN(b)){
      errors.push("Invalid available value");
   }
   if(errors.length>0) {
      //do something with errors (like display them
      return false;
   }
}

Using the else if one of them evaluates to true it will skip the others. For instance if the first one is empty or null then it will do that block and skip the others.

Answer 3

I was testing your code for IE and Firefox and it work. Just add parseInt when you get the value of var b.

var b= parseInt(document.getElementById("available").value);