1

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

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

4

2 回答 2

0

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

这是我所做的：

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

        }
    }
});
于 2013-10-01T20:51:29.183 回答
0

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

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

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

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

于 2013-10-01T20:19:28.793 回答