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()函数。

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

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

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

Answer 2

好的，我将回答我自己的问题＆amp;它似乎工作。

这就是我的所作所为：

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

        }
    }
});

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

2 个答案: