检查 Emberjs 中的表单是否为空的正确方法
Proper way to check if form is empty in Emberjs
我在我的表单中使用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。但是我遇到的问题是,即使表单不为空,按钮也不会执行任何操作。此外,如果我包含整个表单,它也会选中复选框吗?(我也想有一个)
我可以做些什么来确保用户不会提交空表单?
这更像是一个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 放在一起会很有帮助 - 这样它使我们更容易帮助您和您。
好的,
我将回答我自己的问题,它似乎正在工作。
这是我所做的:
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();
}
});
}
}
});
相关文章:
- 是否可以检测父方法是否被覆盖
- 如果找到,DirectoryEntry 的 getFile 方法是否可以删除现有文件
- 这种WebSockets方法是否正确
- 无法获得其他方法是否可以在 HAML JavaScript 中正常工作
- 如何测试 javascript 方法是否创建一个对象并调用该对象上的方法
- 方法是否绑定到在Javascript/Backbone.js中称为异步的事件
- 如何测试该方法是否已在茉莉花中调用
- 类方法是否可以在 ES 6 或 7 中声明为引用
- 对象的方法是否可以将要恢复的对象本身的名称存储为 JavaScript 中的字符串
- 这个 Ajax 方法是否适用于许多浏览器和操作系统
- 数据(“键”,值)方法是否设置数据属性
- 在 JavaScript 中声明删除方法是否安全?
- 在 Object.prototype 上为 NodeList 对象实现数组方法是否是一个很好的实践?
- GET() 方法是否安全,以便从服务器端获取安全数据
- jQuery的css方法是否阻止,直到完全应用更改
- 在字符串上使用toString方法是否有任何使用值
- javascript中的IndexOf方法是否比遍历数组更有效
- 如何知道 Javascript 追加方法是否已完成脚本标记
- 像alert()这样的声明方法是否会覆盖Javascript中内置的alert()方法?
- 在Netsuite API中调用nlapiSearchGlobal(keywords)方法是否有限制?