javascript - 如何检查模态中的表单是否有效

Question

我有一个带有表单的 Bootstrap 模式。我使用 jquery.validate 库对表单执行实际验证。

该部分似乎工作正常。
然而，我的下一步是从表单中获取数据并提交到数据库。

在客户端或服务器端执行此操作哪个更好？在这两种情况下如何检查表单实际上是否有效？

我的模态如下所示:

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Create a new gizmo</h4>
                </div>
                <div class="modal-body form-horizontal">
                    <form role="form" id="newGizmoForm">
                        <div class="form-group">
                            <label class="control-label col-md-2" for="gizmoName">Gizmo Name:</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="gizmoName" name="gizmoName" placeholder="Enter gizmo name" required />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2" for="action">Action:</label>
                            <div class="col-md-10">
                                <input type="text" class="form-control" id="action" placeholder="Enter action" required>
                            </div>
                        </div>                        
                        <div class="form-group">
                            <div class="pull-right">
                                <button type="submit" class="btn btn-success" id="btnSaveGizmoAdd" style="margin-right:10px"                               >Save</button>
                                <button type="button" class="btn btn-default" id="btnCloseGizmoAdd" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </form>                    
                </div>                
            </div>
        </div>
    </div>

我尝试了服务器端，但 Page.IsValid 始终为 true。
我也尝试过客户端，但收到错误“JavaScript 运行时错误:无法获取未定义或空引用的属性“形式””。

 $("#btnSaveGizmoAdd").on("click", function () {
        var vStatus = $("#newGizmoForm").valid();

        // Check if form validated.
          // If valid post data to client      
    });

Answer 1

回答你的第一个问题:你应该始终在服务器端验证你的表单数据，即使你已经在客户端验证了它。 对我来说，你的问题是:当你在点击函数上创建监听器时，你的表单在dom中不存在。 也许你可以试试这个。 var $form = $(this).parents('form'); var vstatus = $form.valid();