Validating 2 forms with a single button

Question

I am using the Jquery Validation plugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation/. Is it possible to validate 2 forms with a single button using this plugin. I find this plugin very useful, but am not sure how to achieve validating 2 forms together.

<form>
    <legend>Shipping</legend>
    <label for="name">Name:</label>
    <input type="text" id="name"></input>
    <br/>
    <label for="address">Address:</label>
    <textarea id="address" rows="4"></textarea>
</form>
<form>
    <legend>Billing</legend>
    <label for="name">Name:</label>
    <input type="text" id="name"></input>
    <br/>
    <label for="address">Address:</label>
    <textarea id="address" rows="4"></textarea>
</form>
<br/><br/>
<button type="submit">Validate the Forms</button>

JSFiddle Example: http://jsfiddle.net/5bkuw/

Please see [this question](http://stackoverflow.com/questions/2719987/how-to-use-two-forms-and-sumit-once) - Not neccessarily an answer to *your* question but it certainly applies to your situation. — George, Mar 08 '13 at 11:20

PSR · Accepted Answer · 2013-03-08T11:35:41.710

1

try this

put a button

   <input type="button" onClick="validateForms()"/>


function validateForms()
{

  $('#form1').valid();
  $('#form2').valid();
}

edited Mar 08 '13 at 11:35

answered Mar 08 '13 at 11:24

PSR

39,804
41
111
151

Thanks PSR, but I think it should be .valid(), .valid works fine – Abishek Mar 08 '13 at 11:34
@AbishekRSrikaanth, The inline JavaScript `onClick` is pretty sloppy when you're already using jQuery. Just use a `click` event with [jQuery `.on()`](http://api.jquery.com/on/). – Sparky Mar 08 '13 at 16:39

score 0 · Answer 2 · answered Mar 08 '13 at 11:35

0

Thanks PSR for hinting this function, but this one worked

<input type="button" onClick="validateForms()"/>


function validateForms()
{

  $('#form1').valid();
  $('#form2').valid();
}

answered Mar 08 '13 at 11:35

Abishek

11,191
19
72
111

Sparky · Answer 3 · 2013-03-08T17:37:37.750

Since you're already using jQuery, the best way would be to eliminate the sloppy inline JavaScript code entirely and replace it with a jQuery click event handler. See: http://api.jquery.com/on/

DEMO: http://jsfiddle.net/xVM6a/

HTML:

<input type="button" id="mybutton" />

jQuery:

$(document).ready(function() {

    $('#mybutton').on('click', function() {
        $('#form1').valid();
        $('#form2').valid();
    });

});

Validating 2 forms with a single button

3 Answers3