Validation using JavaScript not working

[Farhad.idrees]

HI i have many fields in form....i want to check if anyfield is null so i want to do alert mesege also want to change the colour of text field....i have written a code but no error but not working anything...my code is for java scritpt

function validateForm(Qform){
    var i=0,Q= Qform.elements,L=Q.length;
    for (var a = 0; a < L; a++){
        var field = Q[a];
        if(field.value===''){
            field.style.backgroundColor='red';
            ++i;
        }
        else field.style.backgroundColor='';
    }
    if(i){
        alert('You must provide values for all the fields');
        return false;
    }
    return true;
}

and my form code is

<form method="post" action="" enctype="" name="Qform" onSubmit="validateForm();">

<div class="centerform" >
<div id="divbox">
<label  id="label">Name : </label>
<input id="input" type="text" name="txtPGrade" onBlur="validate(this.form.txtPGrade.value,'txtPGrade');"/>
<label id="CName">Invalid Data</label> 

</div>



<strong>Assign New Currency</strong>


<div id="divbox">
<label id="label" >Currency : </label>
<select id="input"></select>
</div>

<div id="divbox">
<label id="label" >Minimum Sallary : </label>
<input id="input" type="text" name="txtMinSal" onBlur="validate(this.form.txtMinSal.value,'txtMinSal');"/>
<label id="MinSal">Invalid Sallary</label> 
</div>


<div id="divbox">
<label id="label" >Maximum Sallary : </label>
<input id="input" type="text" name="txtMaxSal" onBlur="validate(this.form.txtMaxSal.value,'txtMaxSal');"/>
<label id="MaxSal">Invalid Sallary</label> 
</div>

<div id="divbox">
<label id="label" >Step Increase : </label>
<input id="input" type="text" name="txtStepIncrease" />
</div>



<hr>

<input class="button" type="submit" name="btnsubmit" value="Submit" style="margin-left:150px;">

<input class="button" type="reset" name="btnreset" value="Reset" style="margin-top:-150px; ">



</div>
</form>

waiting for solution...
Regards..
Farhad Idrees

[adam.adamski.96155]

I see the problem:
function validateForm(Qform) expects a parameter passed with the function call, but you pass nothing:
onSubmit="validateForm();
change it to:
onSubmit="validateForm(this); return false;"
and it should work okay.

I believe onSubmit="validateForm(this); return false;" will never allow it to submit as. Get rid of the return false, that is what the validateForm is doing.

[adam.adamski.96155]

I tested without return false; initially. The alert alerted and the colours coloured, and when I clicked 'OK', the form went a head and submitted anyway, in FF, Chrome and IE. Yet when I added return false;, it stopped the form submitting, also in all three browsers. There is probably a proper way of acheiving this, and I would like to know what it is :D

[AleMonteiro]

I think the correct use would be: onsubmit="return validateForm(this);"

[AleMonteiro]

Another way of doing this stuff, the way I do, is using a button without subtmit (type=button), then add a click handler the button that will perform the validation (onclick=validateForm()). If the form is valid, then you submit it (form.submit()).

[adam.adamski.96155]

Yep, that's works :D
I've used this for years but always hated it because I didn't understand it. Now I guess that although the original function returns false, there is nowhere calling for a return value as there would be if you wrote:
$bool = doFunction(this); if ($bool){...
so by writing:
return doFunction()
The 'return false' returned from the function has some where to return to?

[AleMonteiro]

Let see if I can explain...

The form onSubmit expects True or False. True means that the form is to be submited, False means to cancel the submit.

onSubmit=validateForm(); return false; Is saying to the browser that when the onSubmit is called, it'll execute validateForm() and, despise the result, it will always return false.

onSubmit= return validateForm(); Is saying to the browser to execute the validateForm and return it's result.

I think it's more clear if you think all in JS:

// onsubmit=validateForm(); return false;
form.onsubmit = function() {
    validateForm();
    return false;
};

//onsubmit=return validateForm();
form.onsubmit = function() {
    return validateForm();  
};

[Farhad.idrees]

Thanks Guys for your help..
i m facing another problem.....this method is only checking textfield not dropdown items..
if i want to check dropdown menu as well so how to do it...?
i m doing but code not working...
REgards..

[Farhad.idrees]

Guys Problem solved...it was just simple and it was not coming in my mind...now solved..
if(field.value=='' || field.value =='1')

its working as i wanted to do...