JavaScript validation for multiple functions?

Question

I have a JavaScript function for a form. The code is :

<script type="text/javascript">
function verify() {
    if (isNaN(document.form1.exp_amount.value) == true) {
        alert("Invalid Block Amount");
        return false;
    } else if ((document.form1.exp_name.value).length == 0) {
        alert("Block Exp is left Blank!");
        return false;
    } else if ((document.form1.exp_amount.value).length == 0) {
        alert("Block Amount is left Blank!");
        return false;
    } else {
        document.form1.submit();
        return true;
    }
}
</script>

Now I have to provide Alphabet Validation for it, which I have it in a separate JS function:

<script language="javascript" >
function checkName() {
    re = /^[A-Za-z]+$/;
    if (re.test(document.exp_name.form1.value)) {
        alert('Valid Name.');
    } else {
        alert('Invalid Name.');
    }
}
</script>

If I want to have Alphabet validation inside function verify(), how could I do it? Are there any other ways?

Have you ever considered indenting your code?!

ThiefMaster
– ThiefMaster

2011-03-24 07:26:26 +00:00
Commented Mar 24, 2011 at 7:26 — ThiefMaster
– ThiefMaster, Commented Mar 24, 2011 at 7:26

mplungjan · Accepted Answer · 2011-03-25 06:53:15Z

1

Please change your validation and form to this which will allow submission of the form if valid and not if errors. The following code is in my opinion canonical and will work on all browsers that support regular expressions (which was introduced in JS1.1 in 1996 with NS3.0) - please note that javascript does not support dashes in names unless you quote the field name in the script. The code does not need the form to be named since it passes the form object in the call (this) and uses the object in the function as theForm

<html>
<head>
<title>Canonical forms validation without jQuery</title>
<script type="text/javascript">
var validName = /^[A-Za-z]+$/;
function checkName(str) {
  return validName.test(str);
}

function verify(theForm) {
  // note: theForm["..."] is short for theForm.elements["..."];
  var amount = theForm["exp_amount"].value; 
  if(amount ==""){
    alert("Block Amount is left blank");
    theForm["exp_amount"].focus();
    return false;
  }
  if (isNaN(amount)) {
    alert("Invalid Block Amount");
    theForm["exp_amount"].focus();
    return false;
  }

  var name = theForm["exp_name"].value; 
  if(name.length==0) {
    alert("Block Exp is left Blank!");
    theForm["exp_name"].focus();
    return false;
  }
  if(!checkName(name)) {
    alert("Block Exp is invalid!");
    theForm["exp_name"].focus();
    return false;
  }
  return true;
}
</script>
</head>
<body>
<form onsubmit="return verify(this)">
Amount: <input type="text" name="exp_amount" value="" /><br />
Name: <input type="text" name="exp_name" value="" /><br />
<input type="submit" />
</form>
</body>
</html>

edited Mar 25, 2011 at 6:53

answered Mar 24, 2011 at 7:03

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Coolbreeze Over a year ago

Thanks for the reply, I have the input text fields as Expenditure Name (exp_name- text), Block Amount (exp_amount-Integer) and the form name is form1. Could you edit this info in your coding. Im new to this. So that i can be more clear whats happening in the script. cheers

mplungjan Over a year ago

@Dinzy - sure. If you have dashes in the names, then the code changes. Please edit the text of your question to reflect the actual situation in such cases. I will update my code. My code does not need the name of the form since we pass the form object in the verify function

mplungjan Over a year ago

@Dinzy, is the -integer part of the field name and is it Integer or integer, i.e. upper or lower case I ?

Coolbreeze Over a year ago

Removed the -integer and -text , i just used to say that exp_amount is of integer type and exp_name is of text type

mplungjan Over a year ago

@Dinzy, ok, that was confusing. Anyway, my script is reflecting reality and time for you to test and accept and vote up if you can.

Samir Talwar · Accepted Answer · 2011-03-24 06:41:26Z

Simply return false or true inside your checkName function:

function checkName()
{
    re = /^[A-Za-z]+$/;
    if(re.test(document.exp_name.form1.value))
    {
        alert('Valid Name.');
        return true;
    }
    else
    {
        alert('Invalid Name.');
        false;
    }
}

Then call it and check the result.

    ...

    else if((document.form1.exp_amount.value).length==0)
    {
        alert("Block Amount is left Blank!");
        return false;
    }

    else if (!checkName()) {
        return false;
    }

    else
    {
        document.form1.submit();
        return true;
    }

As an aside, there are many ways your code can be cleaned up and improved. I don't want to get into them now, but if you'd like to discuss it, just leave a comment.

Clyde Lobo · Accepted Answer · 2011-03-24 07:14:32Z

0

Edit your checkName() function to

function checkName()
{
re = /^[A-Za-z]+$/;
if(re.test(document.exp_name.form1.value))
{
     alert('Valid Name.');
     return true;
}
else
{
    alert('Invalid Name.');
    return false;

}

}

And add

else if(!checkName()){ return false;}

to your validation code just before the form submit

edited Mar 24, 2011 at 7:14

answered Mar 24, 2011 at 6:45

Clyde Lobo

9,1747 gold badges37 silver badges63 bronze badges

1 Comment

amantur Over a year ago

form should be submitted if all validations pass. But using return checkName() will not submit even if check passes as it will return true.

amantur · Accepted Answer · 2011-03-24 09:12:54Z

0

<script type="text/javascript">
function verify()
{
    if(isNaN(document.form1.exp_amount.value)==true)
    {
         alert("Invalid Block Amount");
         return false;
    }
    else if((document.form1.exp_name.value).length==0)
    {
         alert("Block Exp is left Blank!");
         return false;
    }
    else if((document.form1.exp_amount.value).length==0)
    {
         alert("Block Amount is left Blank!");
         return false;
    }
    else if(!(/^[A-Za-z]+$/.test(document.form1.exp_amount.value))) //ADD THIS
    {
        alert('Invalid Name');
        return false;
    }

     document.form1.submit();
     return true;
}
</script>

edited Mar 24, 2011 at 9:12

answered Mar 24, 2011 at 6:39

amantur

40.6k22 gold badges136 silver badges192 bronze badges

5 Comments

Coolbreeze Over a year ago

Since, The form name , field name is not provided for the alphabet validation. will it work?

amantur Over a year ago

@Dinzy sorry it was copy-paste mistake :D

Coolbreeze Over a year ago

@village, I have tried your way, Its not showing the alert box! it is submitting the value!..:( form action='blockexp.php' name='form1' method='POST' onsubmit='return verify()'> <- i have this in the post action of Form

Coolbreeze Over a year ago

Ok.. now i got the alert box invalid name, But still the values are getting submitted.. lol

Coolbreeze Over a year ago

@Village, Its still getting submitted.

Collectives™ on Stack Overflow

JavaScript validation for multiple functions?

4 Answers 4

5 Comments

Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related