Weird action of this function

[rotten69]

Hi everyone,

The function I've got works perfectly but the problem is that it displays the message quickly and then the message disappears for some reason. Am I doing something wrong??

function validateForm(){

        var input0  = document.getElementById('input0').value;
        var input1  = document.getElementById('input1').value;
        var input2  = document.getElementById('input2').value;
        var input3  = document.getElementById('input3').value;
        var input4  = document.getElementById('input4').value;
        var input5  = document.getElementById('input5').value;
        var input6  = document.getElementById('input6').value;
        var input7  = document.getElementById('input7').value;
        var input8  = document.getElementById('input8').value;
        var input9  = document.getElementById('input9').value;
        var input10 = document.getElementById('input10').value;

        // initialise a variable with a value == 0
        var total = 0;  
        var message = document.getElementById('message');
        var totalPara = document.getElementById('total');

        var inputValues = new Array(input0, input1, input2, input3, input4, input5, input6, input7, input8, input9, input10);

        var elem;
        for(elem=0; elem<= inputValues.length; elem++){

            if(inputValues[elem] < 0 ){

               message.innerHTML =  " Error: The input can't be LESS than ZERO! ";
               message.style.backgroundColor="red";
               message.style.width="300px";
               return false;

            }else if(inputValues[elem] > 35){

               message.innerHTML =  " Error: The input can't be GREATER than 35! ";
               message.style.backgroundColor="red";
               message.style.width="300px";


            }
          }
        }

Any idea of what is wrong with this?

[Airshow]

I don't think the problem lies in the function.

How is it called?

[rotten69]

Once the submit button is clicked, then it should call the function. it's been called correctly.

<input type="submit" value="validate form" onclick="validateForm();">

[Airshow]

Clicking the submit button is causing the form to be submitted. With <form action="" ...> the same page is immediately re-served, with a blank message.

• make sure the function returns false under failure conditions or true if the form validates.
• in the HTML, return the returned value from the function.

HTML :

<input type="submit" value="validate form" onclick="return validateForm();">

Alternatively attach the validation function to the form's onsubmit event rather than the submit button.

HTML :

<form method="get" action="" onsubmit="return validateForm();">

Even better is to attach the handler in javascript

onload = function() {
    var form = document.forms[0];
    if(form) {
        form.onsubmit = function() {
            ...
            return false;//failure
            ...
            return true;//success
        }
    }
}   

Then your tags will look like this:

HTML :

<form method="get" action="...">
    ...
    <input type="submit" value="validate form">
</form>

[rotten69]

I don't have anything inside the action attribute yet. But, it will eventually have something like insert.php..

Is there a way of make the page a little more dynamic without using any JS framework? for example, You make the page look like it is loading and currently, doing something behind the scene and make users wait a little bit.

[Airshow]

Rotten,

Froum etiquette!

You have asked a new question without acknowledging this one is answered - which it is, comprehensively.

• People who voluntarily give up their time to answer questions generally appreciate a thank-you.

• Don't cascade. New question = new topic.

Follow these rules and you will continue to receive help.

[Troy III]

if(inputValues[elem] < 0 ){

you are comparing a string literal type of data (like: "", " ", "abc", "123") against dynamic data type of a numeral 0, or a Boolean(false) in HEX mode; -Which will always evaluate to false.

if( "" < 0 ) //will aways return false because [""] is greater than [0].

[rotten69]

@ AirShow .. Cheers for the help. My apologies for not giving a thank-you to you at the first place because I was kindda in a rush and wanted to find out about something to do with implementing a dynamic form.

@ Troy ... The hope is that we get integers from users. Validation using Regex will be done soon. Yeah, you suggested can be an issue. Isn't there a way of restricting the data type received like in java --> e.g int input ?

Again @ Airshow.. I know I am asking a question about the data type but I'm trying to keep it on the topic.

Thanks guys..

[Airshow]

Cheers rotten.

[rotten69]

You're welcome, Airshow. Now, I marked the question as solved but I raised a question for Troy lll. I'm waiting on an answer.

[Thropian]

try using

parseInt(inputValues[elem])

That should give you the integer parts only, or you could use

ParseFloat(inputValues[elem])

if you want decimals as well.

[Taywin]

When you said "dynamic form" what do you want the functionality to be? The question is a bit too broad for me. If you want the validation to happens without going through the server, you could use the form tag 'onsubmit' to do the work for you. If you have only one button which is the "Submit" button, then it is fine. Otherwise, the 'onsubmit' will not work well with "Cancel" because the form does not automatically recognize which button a user has clicked on. There are many work-arounds, but I am not going to talk about it right now.

Back to your validation method, I would prefer to gather all error information at once before you display an error message and return.

var elem;
var errMsg="";
// this line was an error in your original script (notice <=)
//for(elem=0; elem<= inputValues.length; elem++) {
for(elem=0; elem<inputValues.length; elem++) {
  if(inputValues[elem] < 0 ) {
    errMsg += " Error from Input"+i+": The input can't be LESS than ZERO!<br>";
  }
  else if(inputValues[elem] > 35) {
    errMsg += " Error from Input"+i+": The input can't be GREATER than 35!<br>";
    message.style.backgroundColor="red";
    message.style.width="300px";
  }
}
if (errMsg.length()>0) {
  message.style.backgroundColor="red";
  message.style.width="300px";
  message.innerHTML = errMsg;
  return false
}
return true

[rotten69]

  for(elem=0; elem<= inputValues.length; elem++) {

What is wrong with this line? You didn't give an explanation in your post.

  if (errMsg.length()>0) {

Why are you checking the length of errMsg?

cheers!

[Troy III]

This little change in your conditional may guard you well enough

if(Number(inputValues[elem])<0){...
else if(Number(inputValues[elem]) > 35){...