jQuery+;jEditable-防止提交自定义输入
我正在使用带有datepicker的jEditable插件,但在将日期提交到数据库之前,我需要对日期进行验证。因此,我将jEditable-datepicker.js编辑为如下内容:jQuery+;jEditable-防止提交自定义输入,jquery,validation,datepicker,jeditable,onsubmit,Jquery,Validation,Datepicker,Jeditable,Onsubmit,我正在使用带有datepicker的jEditable插件,但在将日期提交到数据库之前,我需要对日期进行验证。因此,我将jEditable-datepicker.js编辑为如下内容: submit: function (settings, original) { var form = this; var tid = $(original).attr('id'); var input = $(original).find('input'); var newDate
submit: function (settings, original) {
var form = this;
var tid = $(original).attr('id');
var input = $(original).find('input');
var newDate = input.val();
alert('id' + tid);
alert('newdate' + newDate);
$.ajax({
async: false,
url: '/Stock/CompareDate',
type: 'GET',
data: { id: tid, inputDate: newDate },
success: function (result) {
alert(result);
if (result < 0) {
alert("Expiry dare cannot be earlier than storage date");
return false;
}
else {
alert('else');
return true;
}
}
});
},
/* attach jquery.ui.datepicker to the input element */
plugin: function (settings, original) {
var form = this,
input = form.find("input");
// Don't cancel inline editing onblur to allow clicking datepicker
settings.onblur = 'nothing';
datepicker = {
dateFormat: 'D, dd M yy'
};
input.datepicker(datepicker);
}
$('.expirydatepicker').editable('@(Url.Action("Edit", "Stock"))',
{
type: 'datepicker',
indicator: 'saving...',
event: 'dblclick',
tooltip: 'Double click to edit...',
submit: '<img src="../../Content/Add_in_Images/ok.png" alt="ok"/>',
cancel: '<img src="../../Content/Add_in_Images/cancel.png" alt="cancel"/>',
style: 'inherit'
});
提交:功能(设置,原件){
var form=此;
var tid=$(原始).attr('id');
变量输入=$(原始).find('input');
var newDate=input.val();
警报(id+tid);
警报(“新日期”+新日期);
$.ajax({
async:false,
url:“/Stock/CompareDate”,
键入:“GET”,
数据:{id:tid,inputDate:newDate},
成功:功能(结果){
警报(结果);
如果(结果<0){
警报(“到期日期不能早于存储日期”);
返回false;
}
否则{
警报(“其他”);
返回true;
}
}
});
},
/*将jquery.ui.datepicker附加到输入元素*/
插件:功能(设置,原始){
var form=此,
输入=form.find(“输入”);
//不要取消对模糊的内联编辑以允许单击日期选择器
settings.onblur='nothing';
日期选择器={
日期格式:“D,dd-M-yy”
};
输入.日期选择器(日期选择器);
}
我在if语句中得到警报,这意味着验证方法可以工作,但无效值仍然会提交到数据库。我不知道为什么回传的虚假力量阻止了提交行动。。我已经尝试解决这个问题很长时间了,但现在是我最接近解决方案的时候了。我只是不知道怎样才能在if语句中停止提交
你真的需要帮助吗。。。谢谢
(更新:加载项html)
“我的日期”字段位于表格中:
<td id="sdat@(item.FoodID)" class="storagedatepicker">
@String.Format("{0:ddd, d MMM yyyy}", item.StorageDate)
</td>
<td id="edat@(item.FoodID)" class="expirydatepicker">
@String.Format("{0:ddd, d MMM yyyy}", item.ExpiryDate)
@String.Format(“{0:ddd,d MMM yyyy}”,item.StorageDate)
@String.Format(“{0:ddd,d MMM yyyy}”,item.ExpiryDate)
对jeditable的调用如下所示:
submit: function (settings, original) {
var form = this;
var tid = $(original).attr('id');
var input = $(original).find('input');
var newDate = input.val();
alert('id' + tid);
alert('newdate' + newDate);
$.ajax({
async: false,
url: '/Stock/CompareDate',
type: 'GET',
data: { id: tid, inputDate: newDate },
success: function (result) {
alert(result);
if (result < 0) {
alert("Expiry dare cannot be earlier than storage date");
return false;
}
else {
alert('else');
return true;
}
}
});
},
/* attach jquery.ui.datepicker to the input element */
plugin: function (settings, original) {
var form = this,
input = form.find("input");
// Don't cancel inline editing onblur to allow clicking datepicker
settings.onblur = 'nothing';
datepicker = {
dateFormat: 'D, dd M yy'
};
input.datepicker(datepicker);
}
$('.expirydatepicker').editable('@(Url.Action("Edit", "Stock"))',
{
type: 'datepicker',
indicator: 'saving...',
event: 'dblclick',
tooltip: 'Double click to edit...',
submit: '<img src="../../Content/Add_in_Images/ok.png" alt="ok"/>',
cancel: '<img src="../../Content/Add_in_Images/cancel.png" alt="cancel"/>',
style: 'inherit'
});
$('.expirydatepicker').editable('@(Url.Action(“Edit”,“Stock”))),
{
类型:“日期选择器”,
指标:“正在保存…”,
事件:“dblclick”,
工具提示:“双击可编辑…”,
提交:“”,
取消:“”,
风格:“继承”
});
不尝试停止提交,而是在验证失败时用默认值替换输入值,以使其正常工作。谢谢迟来的回答,但可能对其他人仍然有用,只需返回false
fromonsubmit
参数函数以避免其提交,例如:
$('.editable').editable('/someurl', {
... // all your jeditable settings
onsubmit: function (settings, original) {
if (<conditions to not submit>)
return false;
}
});
$('.editable').editable('/someurl'{
…//所有表格设置
onsubmit:函数(设置,原始){
如果()
返回false;
}
});
Hi,我添加了html,我的日期字段都在一个表中,直到我不清楚提交函数的调用位置为止。我应该从问题中包含的脚本“submit”中调用提交函数。。。