Validating multiple forms in Javascript

Question

I have 2 forms I'd like to validate. For some reason I can only validate one form. Note: In my webpages I use php to include my header file (where the JS validation script is). My question is, what is the proper format to validate multiple forms with the following format?

<script type="text/javascript"> 

window.onload=function() {
  document.Form1.onsubmit=function() {
        ...
        field validating
        ...
    }
}

I've tried this, but only one will work at a time (in this case Form1, since it's first):

<script type="text/javascript"> 

window.onload=function() {
  document.Form1.onsubmit=function() {
        ...
        field validating
        ...
    }

  document.Form2.onsubmit=function() {
        ...
        field validating
        ...
    }
}

Thanks!

Edit: This is for an assignment, so it doesn't need to be perfect at all :p

Edit 2: HTML Forms:

Table1.php
...
<form name="Form1" id="Form1" method="post" onSubmit="return(validate())">
...
Table2.php
...
<form name="Form2" id="Form2" method="post" onSubmit="return(validate())">
...

Obviously it's the onSubmit part that is causing the problem?

PS: validate with the server as well.

Ed Heal
– Ed Heal

2015-09-20 06:27:09 +00:00
Commented Sep 20, 2015 at 6:27 — Ed Heal
– Ed Heal, Commented Sep 20, 2015 at 6:27
Can you share the HTNL for the forms?

takinola
– takinola

2015-09-20 06:31:41 +00:00
Commented Sep 20, 2015 at 6:31 — takinola
– takinola, Commented Sep 20, 2015 at 6:31
Can you share the HTNL for the forms?

takinola
– takinola

2015-09-20 06:33:12 +00:00
Commented Sep 20, 2015 at 6:33 — takinola
– takinola, Commented Sep 20, 2015 at 6:33
@takinola Sorry! I have added them in.

CrackerBarrelKid55
– CrackerBarrelKid55

2015-09-20 06:35:50 +00:00
Commented Sep 20, 2015 at 6:35 — CrackerBarrelKid55
– CrackerBarrelKid55, Commented Sep 20, 2015 at 6:35

Pranav C Balan · Accepted Answer · 2015-09-20 07:16:22Z

1

You can use onsubmit to set handler for both, pass this as argument for referencing submitting form

function validate(ele) {
  var valid = true;

  // validate fields
  ele.text.style.borderColor = ele.text.value == '' ? 'red' : 'green'

  return valid;
}

<form id="form1" onsubmit="return validate(this);">
  <input name="text">
  <input type="submit" value="submit" />... ...
</form>
<form id="form1" onsubmit="return validate(this);">

  <input name="text">
  <input type="submit" value="submit" />... ...
</form>

or you need to get using document.forms[index] with index

console.log(document.forms)

window.onload = function() {
  document.forms[0].onsubmit = function() {
    alert(1);
    // do validation here
  }

  document.forms[1].onsubmit = function() {
    alert(2);
    // do validation here
  }
}

<form id="form1" onsubmit="return validate(this);">
  <input name="text">
  <input type="submit" value="submit" />... ...
</form>
<form id="form2" onsubmit="return validate(this);">

  <input name="text">
  <input type="submit" value="submit" />... ...
</form>

edited Sep 20, 2015 at 7:16

answered Sep 20, 2015 at 6:37

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

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

4 Comments

CrackerBarrelKid55 Over a year ago

Thanks for you help, I do get prompted '1' for every form though. Is there a way I can use the name of the form to identify which is which? These forms are on separate pages by the way.

Pranav C Balan Over a year ago

@PetShopBoys you can use this.id this will prompt id

CrackerBarrelKid55 Over a year ago

Sorry, I meant that form1 prompts '1', and form 2 prompts '1' also, instead of '2'.

Pranav C Balan Over a year ago

@PetShopBoys if you are talking about first method then use ele.id for getting it's id and ele.name for getting it's name

ffffranklin · Accepted Answer · 2015-09-20 06:43:03Z

0

Your pointing to undefined properties on the root document. Try using the document.forms collection: https://developer.mozilla.org/en-US/docs/Web/API/Document/forms

Example document.forms['formID'].onsubmit

answered Sep 20, 2015 at 6:43

ffffranklin

3291 silver badge2 bronze badges

Collectives™ on Stack Overflow

Validating multiple forms in Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related