html5的验证器(例如<input required>不起作用
validators of html5 (e.g. <input required> is not working
我在mvc工作。我有一个视图,其中一个表单是post到服务器使用ajax post,knockout,javascript。在表单中需要名称字段和代码字段。因此,我在我的表单中使用了以下代码作为名称:-
<input type="text" data-bind="value:Name" placeholder = "Enter Name" required /><br />
下面的javascript是我用来发布表单
<script type="text/javascript">
var EmpViewModel = function () {
//Make the self as 'this' reference
var self = this;
//Declare observable which will be bind with UI
self.Code = ko.observable("");
self.Name = ko.observable("");
self.DateOfBirth = ko.observable("");
self.Age = ko.observable("");
self.ContactNumber = ko.observable("");
self.Email = ko.observable("");
self.Address = ko.observable("") ;
self.MaritalStatus = ko.observable("");
self.City = ko.observable("");
self.Reference = ko.observable("");
//The Object which stored data entered in the observables
var EmpData = {
EmpCode: self.Code,
EmpName: self.Name,
Dob: self.DateOfBirth,
Age: self.Age,
ContactNumber: self.ContactNumber,
MaritalStatus: self.MaritalStatus,
EmailID: self.Email,
Address: self.Address,
City: self.City,
Reference: self.Reference
};
//Declare an ObservableArray for Storing the JSON Response
self.Employees = ko.observableArray([]);
//Function to perform POST (insert Employee) operation
this.save = function () {
//Ajax call to Insert the Employee
$.ajax({
type: "POST",
url: "/Exercise/Save/",
data: ko.toJSON(this), //Convert the Observable Data into JSON
contentType: "application/json",
success: function (data) {
alert(data);
window.close();
// opener.location.reload(true);
},
error: function () {
alert("Failed");
}
});
//Ends Here
};
}
ko.applyBindings(new EmpViewModel());
</script>
在我的表单中存在各种验证器,但没有一个有效。即使没有填写任何字段,表单仍在提交?
有解决这个问题的办法吗?
您的表单验证没有做任何事情,因为您实际上从未提交过表单。您只需处理一个按钮按下,序列化您的视图模型,并使用jquery发送POST请求到服务器。
我们需要看到你的表单提交代码来帮助你,但如果你使用jQuery验证,你应该调用。valid()
//somewhere in the document
$(function() {
//use jQuery validates default rules and validate on form submit
$("#MyForm").validate();
})
你viewmodel //changed to self from this for consistency
self.save = function () {
//what you SHOULD be doing is validating against your model. BUT, in the interest of time...
var isValid = $("#MyForm").valid();
if(isValid !== true) {
alert("Not Valid!"); //please don't use an alert in a real app!
return;
}
//Ajax call to Insert the Employee
$.ajax({
type: "POST",
url: "/Exercise/Save/", //change this to self again, for consistency AND so you aren't relying on whatever is firing the save function to set this properly
data: ko.toJSON(self), //Convert the Observable Data into JSON
contentType: "application/json",
success: function (data) {
alert(data);
window.close();
// opener.location.reload(true);
},
error: function () {
alert("Failed");
}
});
//Ends Here
};
HTML5 CR中定义的表单数据验证仅适用于通过HTML提交的表单,例如使用<input type=submit>
。它不适用于脚本提交,即使您只使用表单的submit()
方法,更不适用于Ajax POST。
而且,直到ie9版本都不支持HTML5的这一部分。
由于这些原因,您应该在自己的JavaScript代码中执行表单数据验证,可能使用合适的库。如果你还使用jquery.validate.js文件在你的页面的表单验证,时间它隐式添加'novalidate'属性值'novalidate'(true)在你的每一个表单元素,你的html5验证失败
相关文章:
- 正在将base64 jpeg从input-type=file上传到服务器
- 如何使用input-tage上传图片并查看在laravel中上传的文件预览
- $(input[]).仅在firefox中出现每个抛出语法错误
- 我如何在INPUT TEXT中使用这个Javascript和jQuery
- 如何使用keyup或input进行操作?javascript(jQuery)
- sails.js beforeCreate方法只接收required设置为true的模型属性
- 未捕获错误:语法错误,无法识别的表达式:input[@type=submit]
- 无法使用 $('input[name=“rate”]').focus() 聚焦文本框;方法
- getDocument by id/get input text from button dons'不起作用
- 选中复选框时,DOM不显示element.input.checked和ng
- $(e.target).find和template.find('input').value之间有什么区别
- 单击表单的“提交”按钮时,获取表单中的所有INPUT和ACTION标记
- 当绑定到Date()-对象时,如何格式化input[time]的值
- AngularJS:如何访问自定义指令中的input[date]min属性
- $(input).blur() & $(input).focusout
- $('input')返回为空
- JS在input标签上使用keyup事件进行搜索
- Javascript - 根据表单选择切换 html5 required=“” 属性
- 如何使用html input required属性将一组输入设置为required ?
- Input Required属性在javascript生成时不起作用