0

Bootstrapvalidationを使用して入力フィールドをチェックしています。その上、送信時に行われる追加のチェックがあります。エラーを表示せずに送信されるか、これを使用すると:

$("#form").submit(function(ev){
    ev.preventDefault();
});

$("#submit-form").on("click", function(){
    var valid=some code for additional check;
    if (valid) {
        $("#form").submit();
    }
    else {
        return;
    }
});

しかし、それはすべて再帰的であり、フォームは送信されません。これを機能させるにはどうすればよいですか？

4

2 に答える 2

1

@Harshilの答えは、1000hz BootstrapValidatorプラグインとはまったく異なるプラグインであるbootstrapValidationプラグインをカバーしています

あなたのアプローチでev.preventDefault();は、別のスクリプトである最初のスクリプトにあり、フォームの送信を妨げても、入力フィールド/追加チェックが有効または無効であり、入力状態/追加チェックが有効または無効であり、最初のスクリプトでまったく定義されていません.

必要なのは、送信イベントを条件付きで処理additional custom checkして、他のフォーム入力フィールドを確認して処理し、すべてが適切であれば、フォームを送信することです。

$('#form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
  } else {
    // everything looks good!
  }
})
于 2016-03-29T20:39:25.823 に答える
1

次の例を参照してください

<script>
$(document).ready(function() {
    $('#taskForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                task: {
                    validators: {
                        notEmpty: {
                            message: 'The task is required'
                        }
                    }
                },
                description: {
                    validators: {
                        notEmpty: {
                            message: 'The description is required'
                        }
                    }
                }
            }
        })
        .on('success.field.fv', function(e, data) {
            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                data.fv.disableSubmitButtons(true);
            }
        });
});
</script>
<form id="taskForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Task</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="task" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Description</label>
        <div class="col-xs-5">
            <textarea class="form-control" name="description" rows="5"></textarea>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <!-- Initially, the submit button is disabled -->
            <button type="submit" class="btn btn-default" disabled="disabled">Submit</button>
        </div>
    </div>
</form>

于 2016-03-29T13:17:43.053 に答える