在 Emberjs 中检查表单是否为空的正确方法答案

【问题标题】：Proper way to check if form is empty in Emberjs在 Emberjs 中检查表单是否为空的正确方法
【发布时间】：2013-10-01 20:08:44
【问题描述】：

我在我的表单中使用 HTML5 验证，就像这样，

<script type="text/x-handlebars" id="project">
    <div class="row">

        <div class="span6">
            <div class="well well-small">
                <p style="text-align: center">
                    You can create a new Project by filling this simple form.
                </p>

                <p style="text-align: center"> Project Name should be minimum 10 characters & There's no limit on
                    Project Description.
                </p>
            </div>
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="projectname">Project Name: </label>

                    <div class="controls">
                        {{!view App.TextFieldEmpty}}
                        <input type="text" name="projectname" id="projectname" required title="Project Name is Required!" pattern="[A-z ]{10,}" placeholder="Enter Project Name"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="projectdesc">Project Description:</label>

                    <div class="controls">
                        <textarea rows="3" id="projectdesc" name="projectdesc" placeholder="Enter Project Desc"
                                  required="Description Required"></textarea>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <button class="btn" {{action 'createNew'}}>Add Project</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</script>

这就是我在 App.js 中尝试做的事情，

App.ProjectController = Ember.ArrayController.extend({
    actions : {
        createNew : function() {
            if (!("#project form.form-horizontal") === "") {
                App.Project.createNew();
            }
        }
    }
});

App.ProjectRoute = Ember.Route.extend({

});

App.Project.reopenClass({
    createNew : function() {

        dataString = {
            'projectname' : $("#projectname").val(),
            'projectdesc' : $("#projectdesc").val()
        };
        console.log('check');
        $.ajax({
            type : "POST",
            url : "http://ankur.local/users/createNewProject",
            data : dataString,
            dataType : "json",
            success : function(data) {
                console.log('success');
            }
        });
        return false;

    }
});

正如您在操作中看到的，我正在尝试检查表单是否不为空，然后执行 Ajax POST。但是我遇到的问题是即使表单不是空的，按钮也不会做任何事情。此外，如果我包含整个表单，它也会检查复选框吗？（我也想要一个）

我能做些什么来确保用户不会提交空表单？

【问题讨论】：

你测试过你的(!("#project form.form-horizontal") === "") 条件吗？乍一看，我不明白这怎么会返回 true。
是的，我用空表和填充表都试过了
Form Validations in EmberJS 的可能重复项

标签： javascript ajax forms ember.js

【解决方案1】：

这更像是一个 JS/jQuery 问题，而不是 Ember 问题。您应该查看 jQuery val() 函数。

您应该在您的视图中验证您的表单输入，您可以在其中访问<input 元素。此外，(!("#project form.form-horizontal") === "") 缺少 jQuery 选择器 $。

App.ProjectView = Ember.View.extend({
    actions : {
        createNew : function() {
            if (!(this.$("#projectname").val() === "")) {
                App.Project.createNew();
            }
        }
    }
});

您的代码中可能还有其他一些问题，如果您可以将 jsFiddle 放在一起会很有帮助 - 这样我们就可以更轻松地为您和您提供帮助。

【讨论】：

我实际上使用了这个解决方案，但我打算检查各个字段。我也得到了这个，this.$ is not a function
您需要在视图中执行此操作，而不是控制器。此外，这仅适用于单个字段，您不能一次检查整个表单。
但是动作必须在控制器中，不是吗？
在控制器中，您将无法访问您的视图/模板 HTML。这取决于你想做什么。我遵循的准则是与 HTML 有关的所有内容都进入视图，属于底层数据的较低级别的操作（例如模型中的 createNew 方法）进入控制器。

【解决方案2】：

好的，我将回答我自己的问题并且它似乎正在工作。

这就是我所做的：

App.ProjectController = Ember.ArrayController.extend({
    actions : {
        createNew : function(event) {
            $(":text, :file, :checkbox, select, textarea").each(function() {
                if ($(this).val() === "") {
                    alert("Empty Fields!!");
                } else {
                    App.Project.createNew();
                                    event.preventDefault();
                }
            });

        }
    }
});

【讨论】：