模态 bootstrap 上的 FormValidation

Question

我有一个模态

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h2 class="page-title">
                Add Movie
                <small>Note fields marked with <span style="color:red">*</span> are required</small>
            </h2>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" role="form" id="NewMovie">
                <div class="form-group">
                    <label class="control-label col-sm-4" for="prefix">
                        Title <span style="color:red">*</span>
                    </label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="Title" name="Title" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="prefix">
                        Classification <span style="color:red">*</span>
                    </label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="Classification" name="Classification" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="prefix">
                        Rating <span style="color:red">*</span>
                    </label>
                    <div class="col-sm-6">
                        <input id="Rating" name="Rating" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1" data-slider-value="0" /> <span id="rate" style="margin-left:5%">0 / 5</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="prefix">
                        Release Date <span style="color:red">*</span>
                    </label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="ReleaseDate" name="ReleaseDate" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="prefix">
                        Cast <span style="color:red">*</span>
                    </label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control col-sm-5" id="Cast" />
                    </div>
                    <div class="col-sm-1">
                        <button type="button" id="btnNewCast" class="btn btn-default">+</button>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4" for="prefix"></label>
                    <div class="col-sm-6" id="newCast">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" id="btnAddMovie" data-dismiss="modal">Save</button>
        </div>
    </div>

</div>

当单击 btnAddMovie 时，我会调用 ajax / jquery 方法，这会调用我的控制器中的方法。但在我提交之前，我想验证他们输入的字段。

我正在关注这个Form validation on bootstrap modal

我已声明我的实现如下：

$(document).ready(function() {
$('#NewMovie').formValidation({
    framework: 'bootstrap',
    excluded: [':disabled'],
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        Title: {
            validators: {
                notEmpty: {
                    message: 'The Title is required'
                }
            }
        }
    }
});
});

我的ajax方法如下：

$("#btnAddMovie").click(function () {

            var stringArr = $('span[data-id="cast[]"]').map(function () {
                return $(this).text().trim();
            }).get();

            $.ajax({
                url: '/Movies/Add',
                traditional: true,
                data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": stringArr },
                cache: false,
                type: "POST",
                success: function (result) {
                    if (result.success) {

                    }
                },
                error: function (result) {
                    alert("Error");
                }
            });
        });

但出于某种原因，当我点击表单上的按钮时，它会自动回发而不进行验证？

我正在尝试验证并根据它是真还是假然后执行相关操作。

Answer 1

如果删除 ajax 调用，验证是否有效？

也许你应该看看你的提交按钮：

<button type="button" class="btn btn-default" id="btnAddMovie" data-dismiss="modal">Save</button>

这不是提交按钮。

如果您查看您提供给我们的页面中的示例，您可以看到提交按钮的代码是

<button type="submit" class="btn btn-primary">Login</button>

尝试改变这个，如果你能提供给我们一个就好了JSFiddle

希望对您有所帮助。

Answer 2

关于您的按钮，您必须将其更改为 submit 按钮或使用 button 设置来指示哪个按钮应触发验证（见下文）

button: {
    // The submit buttons selector
    selector: '#btnAddMovie'
}

you have to delete data-dismiss="modal" from your button

然后触发success.form.fv事件并在那里调用你的ajax方法，见以下代码：

$('#NewMovie').formValidation({
    framework: 'bootstrap',
    excluded: [':disabled'],
    // ...
    icon: {
        // ...
    },
    fields: {
        // ...
    }
})
.on('success.form.fv', function(e) {
    // Prevent form submission
    e.preventDefault();

    // And then
    // Place your Ajax call here
    var stringArr = $('span[data-id="cast[]"]').map(function () {
        return $(this).text().trim();
    }).get();

    $.ajax({
        url: '/Movies/Add',
        traditional: true,
        data: { "Title": $("#Title").val(), "Classification": $("#Classification").val(), "Rating": $("#Rating").val(), "ReleaseDate": $("#ReleaseDate").val(), "Cast": stringArr },
        cache: false,
        type: "POST",
        success: function (result) {
            if (result.success) {

            }
        },
        error: function (result) {
            alert("Error");
        }
    });

    // And then close your modal
    $('#MyModal').modal('hide');
});

# 参考文献：

form 事件文档：http://formvalidation.io/settings/#event-form
button 设置文档：http://formvalidation.io/settings/#form-button

模态 bootstrap 上的 FormValidation

FormValidation on modal bootstrap

javascript

jquery

formvalidation-plugin

# 参考文献：