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

Question

我在表单中使用 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。但我遇到的问题是，即使表单不为空，按钮也不会执行任何操作。此外，如果我包含整个表单，它也会检查复选框吗？ (我也想要一个)

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

Answer 1

这更像是一个 JS/jQuery 问题，而不是 Ember 问题。你应该看看 jQuery val() 功能。

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

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

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