0

i have a function where triggers a form-submit on twitter bootstrap modal button. but when the form isn't valid, the onsubmit event fires for each field that isn't valid. the form has an hidden submit button to do the html5 validation and this hidden submit i trigger a klick when press the modal-button.

function: 

$('#'+dialogId).on('click', '.btn-primary', function () {

            var body = $(this).parent('.modal-footer').prev('.modal-body');
            var form = body.find('form');


                form.on('submit', function (e) {

                    e.preventDefault();    

                    if(typeof form[0].checkValidity == 'function' && form[0].checkValidity() === true) {
                        $.post($(form).attr('action'), form.serialize(), function (response) {
                      // some other stuff      
                        });
                    }
                });               


            $('#'+buttonId).trigger('click');        
        });

and the form:

<form class="form-horizontal" action="/app_dev.php/players/" method="post" name="appbundle_players"><fieldset><div class="form-group"><label class="control-label col-sm-3 required" for="appbundle_players_firstname">
    Firstname
                                    </label><div class="col-sm-9"><input type="text" class="form-control" pattern=".{2,}" maxlength="255" required="required" name="appbundle_players[firstname]" id="appbundle_players_firstname"></div></div><div class="form-group"><label class="control-label col-sm-3 required" for="appbundle_players_lastname">
    Lastname
                                    </label><div class="col-sm-9"><input type="text" class="form-control" pattern=".{2,}" maxlength="255" required="required" name="appbundle_players[lastname]" id="appbundle_players_lastname"></div></div><div class="form-group"><label class="control-label col-sm-3 required" for="appbundle_players_passnr">
    Passnr
                                    </label><div class="col-sm-9"><input type="text" class="form-control" required="required" name="appbundle_players[passnr]" id="appbundle_players_passnr"></div></div><div class="form-group"><label class="control-label col-sm-3 optional" for="appbundle_players_team">
    Team&nbsp;<span>(optional)</span></label><div class="col-sm-9"><select class=" form-control" name="appbundle_players[team]" id="appbundle_players_team"><option value=""></option><optgroup label="Oberliga"><option value="8">Overclocks</option><option value="9">test</option><option selected="selected" value="13">fooop 2</option><option value="14">Jack old</option><option value="15">Spirit</option><option value="16">spitzendarter</option><option value="17">mittendrin</option><option value="20">Rock'n Rollers</option><option value="22">mittendrin</option><option value="23">fooop 2</option><option value="39">sdfsdfsdfsdf</option><option value="40">sdfsdfsdfsdf</option></optgroup><optgroup label="A-Liga"><option value="10">Hackstock</option><option value="11">DC Depp</option><option value="12">FooDarters</option><option value="19">ich bin der test</option></optgroup><optgroup label="B-Liga"><option value="21">B-Liga-Team 1</option><option value="41">Dart Breakers</option><option value="42">Foo Darters</option><option value="43">test</option></optgroup></select></div></div><div class="form-group"><label class="control-label col-sm-3 required" for="appbundle_players_active">
    Aktiv
                                    </label><div class="col-sm-9"><select class=" form-control" name="appbundle_players[active]" id="appbundle_players_active"><option value="0">nein</option><option value="1">ja</option></select></div></div><div><button class="btn btn-default" style="display:none;" name="appbundle_players[save]" id="appbundle_players_save" type="submit">
    Save</button></div></fieldset></form>

why does the function fires for each filed that is not valid the ajax-request?

4

0 回答 0