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

これは、Ember よりも JS/jQuery に関する質問です。val()jQuery関数を見てください。

<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 に答える
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 に答える