Question

我有一个莫代尔

updateInteractiveTransition

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

我正在关注此Form validation on bootstrap modal

我已声明我的实施如下：

<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>

我的ajax方法如下：

$(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'
                }
            }
        }
    }
});
});

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

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

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'
}

您必须从按钮中删除data-dismiss="modal"

然后触发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

模态引导的FormValidation

2 个答案:

＃参考文献：