jQuery + jEditable - 防止提交自定义输入

发布于 2024-12-13 06:39:22 字数 2157 浏览 3 评论 0原文

我正在将 jEditable 插件与日期选择器一起使用,但在将日期提交到数据库之前我需要验证日期。因此,我将 jEditable-datepicker.js 编辑为如下内容:

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

我在 if 语句中收到警报,这意味着验证方法有效,但无效值仍会提交到数据库。我不知道为什么 return false 会停止提交操作。我已经尝试解决这个问题很长时间了,但这是我最接近解决方案的时间。我只是不知道如何在 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)

对 jeditable 的调用就像这:

    $('.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'

    });

I am using jEditable plugin with the datepicker but I need validation for the date before submit it to the database. So i edit the jEditable-datepicker.js to something like this:

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

I get the alert in the if statement, which means the validation method works, but the invalid value still get submitted to the database. I dont know why the return false dint stop the submit action.. I had tried to solve this problem for a long time, yet this is the time i get closest to the solution. I just dint know how can i stop submission in the if statement...

Do really need help here... Thanks....

(UPDATE: add in html)

My date field is in a table:

        <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)

The call to jeditable is like this:

    $('.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'

    });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

一个人的旅程 2024-12-20 06:39:22

通过不尝试停止提交来使其正常工作,而是在验证失败时将输入值替换为默认值。谢谢

Get it work by not trying to stop the submission, but replace the input value with the default value if the validation failed. Thanks

鱼忆七猫命九 2024-12-20 06:39:22

迟到的答案,但可能对其他人仍然有用,只需从 onsubmit 参数函数中 return false; 以避免其提交,例如:

$('.editable').editable('/someurl', {

    ... // all your jeditable settings

    onsubmit: function (settings, original) {

        if (<conditions to not submit>)
            return false;

    }
});

Late answer, but maybe still useful to others, just return false; from onsubmit parameter function to avoid its submission, for example:

$('.editable').editable('/someurl', {

    ... // all your jeditable settings

    onsubmit: function (settings, original) {

        if (<conditions to not submit>)
            return false;

    }
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文