How to validate all fields with the same function in JavaScript?

Question

I need to do the following, but I couldn't find any example of similar form validation on the web:

 <script type="text/javascript">
   function something(){
     if the value on the field who is calling this function == 2,4,6 or 8
     alert("This number is invalid")
     focus in this field. 
</script>

Field1 call something()
Field2 call something()
Field3 call something()
Field4 call something()
Field5 call something()
Field6 call something()

I've tried like this:

function validate()
        {
            valid = true;

            if ( document.form.field_name.value == "2" || document.form.field_name.value == "4" || document.form.field_name.value == "6" ||
           document.form.field_name.value == "8" ){
                alert ( "Invalid number." );
                valid = false;
                document.form.field_name.focus();

            }

            return valid;
        }

I'm calling the function like this:

a)"Some text" <input type="text" name="aa" size="1" maxlength="1" onkeypress="return validate(aa)"><br>

But this way I would have to create a different function for every field. So how could I implement this?

Some of the solutions below require that you attach the validation to each form element, and some are scripts that you can run onsubmit before the form posts. Both are good approaches. — Benj
– Benj, Commented Sep 20, 2010 at 14:05
The name of your field is a string, not an object or variable, so you need to quote it in your onkeypress attribute (onkeypress="return validate('aa')") or use this.name: onkeypress="return validate(this.name)" — Daniel Vandersluis
– Daniel Vandersluis, Commented Sep 20, 2010 at 14:41

Daniel Vandersluis · Accepted Answer · 2010-09-20 14:36:10Z

3

You can use bracket notation instead of dot notation when collecting your form element, which allows you to use a variable:

function validate(field_name)
{
  var valid = true;
  var element = document.form[field_name];

  if (!element)
  {
    alert('A field named ' + field_name + ' cannot be found in your form!');
    return false;
  }

  var value = element.value;

  if (value == "2" ||  value == "4" || value == "6" || value == "8")
  {
    alert("Invalid number.");
    valid = false;
    element.focus();
  }

  return valid;
}

Then you'd just call validate with the name of the field you want to validate.

Resources:

Dot Notation and Square Bracket Notation in JavaScript

edited Sep 20, 2010 at 14:36

answered Sep 20, 2010 at 13:59

Daniel Vandersluis

94.7k23 gold badges174 silver badges158 bronze badges

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

4 Comments

StudioWorks Over a year ago

It says the following in IE: 'value' is null or not a object on the 5º line in your code. I edited the question to show how I'm calling the function.

Daniel Vandersluis Over a year ago

Is your form actually named form? Does the field name you are passing into validate exist?

StudioWorks Over a year ago

My form name is actually called 'questionario', I changed that. Also, as you can see in my question ( that I edited ) I'm calling the function passing the 'aa' field from inside the 'aa' field.

Daniel Vandersluis Over a year ago

@StudioWorks take a look at my comment on your question.

Benj · Accepted Answer · 2010-09-20 14:27:03Z

2

function validate()
    {
        var valid = true;

        var fields = ['list', 'of', 'unique', 'input', 'ids']; 

        for (inputid in fields) {
            field = document.getElementById(inputid);
            if ( field.value == "2" || field.value == "4" || field.value == "6" ||
       field.value == "8" ) {
                alert ( "Invalid number." );
                valid = false;
                field.focus();
                break;
            }
        }

        return valid;
    }

edited Sep 20, 2010 at 14:27

answered Sep 20, 2010 at 14:02

Benj

1,8754 gold badges19 silver badges30 bronze badges

Comments

Colin Fine · Accepted Answer · 2010-09-20 14:03:28Z

1

You need to parameterise your function, to pass the field (or its name in as an argument).

My example uses the prototype.js function $F, but you could do it equally well with jquery or (a bit more long-windedly) in native Javascript

function validate(field)
     {
            valid = true;
            value = $F(field);


            if ( value == "2" || value == "4" || value == "6" ||
           value == "8" ){
                alert ( "Invalid number." );
                valid = false;
                document.form.field_name.focus();

            }

            return valid;
        }

validate('field1');
validate('field2');

etc.

answered Sep 20, 2010 at 14:03

Colin Fine

3,3641 gold badge22 silver badges34 bronze badges

Comments

bevacqua · Accepted Answer · 2010-09-20 14:01:28Z

0

you could try using jQuery, and validate with something like this:

var valid = true;

$(".validateMe").each(function()
{
    var v = this.value;

    if(v == "2" || v=="4" || v=="6" || v=="8") {
        valid = false;

        // Exit for each
        return false;
    } 
});

if(!valid){
    alert("Invalid number.");
    $(this).focus();
}

return valid;

Each field would have to have the "validateMe" CssClass

answered Sep 20, 2010 at 14:01

bevacqua

48.8k56 gold badges176 silver badges287 bronze badges

1 Comment

Daniel Vandersluis Over a year ago

Unless jQuery is already being used for something, this is really overkill.

Saurabh Rana · Accepted Answer · 2013-09-17 20:29:27Z

0

Using Javascript
1. The if-else statements given on this website can be added to your validate function inside a loop that checks every field of the form.
http://eisabainyo.net/weblog/2009/04/30/10-examples-of-basic-input-validation-in-javascript/

2. Still unclear then refer this great guide
http://www.tizag.com/javascriptT/javascriptform.php

Using jQuery
You can always try jQuery validation plugins
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/

answered Sep 17, 2013 at 20:29

Saurabh Rana

3,5862 gold badges21 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to validate all fields with the same function in JavaScript?

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related