Can't use JQuery form validation with two buttons html form

Question

HTML:

<form id="myForm">
    <fieldset>
        <ol>
            <li>
                <label for="data">Data</label>
                <input id="data" name="data" type="text" placeholder="Ex.º: 14-02-2014" required>
            </li>
            <li>
                <label for="conta">Conta</label>
                <input id="conta" type="text" name="conta" placeholder="Ex.º: " required>
            </li>
        </ol>
        <input id="oknovo" type="submit" value="OK & Novo" />
        <input id="okfechar" type="submit" value="OK & Fechar" />
    </fieldset>
</form>

JS:

$(document).ready(function () {

    var form = $('#myForm');
    var botao;

    form.validate();
    if (form.valid()) {
        $("#myForm input[type=submit]").click(function (event) {
            botao = $(this).attr('id');
            alert("clique " + botao);
        });
    };
});

I want to validate the form using JQuery validation plugin.

If it is valid according to the rules specified in the HTML form, then identify which of the buttons was clicked. The validation plugin is working but the form is never valid, therefore the function is never called to alert the id of the button.

You may see a live JSFiddle here.

Steven Hunt · Accepted Answer · 2014-02-18 19:33:29Z

1

If the form isn't valid at DOM ready (which it will never be), then your code to add the event handler to the button won't run. You should consider running your validation on a different event, say when the text in the textbox changes.

Example:

$('input[type=textbox]').change(function() {
    // put your validation code here.
});

answered Feb 18, 2014 at 19:33

Steven Hunt

2,32119 silver badges20 bronze badges

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

Comments

Colin DeClue · Accepted Answer · 2014-02-18 19:43:47Z

0

Put your validation inside the click event, and it starts working:

$(document).ready(function () {

    var form = $('#myForm');
    var botao;
    form.validate();
    $("#myForm input[type=submit]").click(function (event) {
        if (form.valid()) {
            botao = $(this).attr('id');
            alert("clique " + botao);
        }
        event.preventDefault();
    });
});

Working fiddle

edited Feb 18, 2014 at 19:43

answered Feb 18, 2014 at 19:38

Colin DeClue

2,2643 gold badges28 silver badges50 bronze badges

2 Comments

Andrew Whitaker Over a year ago

You should call validate() outside of the click handler. Otherwise you're setting the form up for validation every time you click, which you don't need to do.

Colin DeClue Over a year ago

@AndrewWhitaker: Thanks, I updated my answer (and the fiddle)

CRABOLO · Accepted Answer · 2014-02-18 19:30:59Z

0

Try adding event.preventDefault();

    $("#myForm input[type=submit]").click(function (event) {
        event.preventDefault();
        botao = $(this).attr('id');
        alert("clique " + botao);
    });

answered Feb 18, 2014 at 19:30

CRABOLO

8,82439 gold badges46 silver badges68 bronze badges

1 Comment

user882670 Over a year ago

Nothing seems to have changed

Collectives™ on Stack Overflow

Can't use JQuery form validation with two buttons html form

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related