Question

在我的应用程序中，我使用jQuery插件Jeditable。

我在尝试提交空字段时必须添加一个消息框，例如： FIELD MUST FOR EMPTY！

HTML：

<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td class="edit">123456789</td>
    </tr>
    <tr>
        <td class="edit">132456789</td>
    </tr>
    <tr>
        <td class="edit">123456789</td>
    </tr>
</table>

JavaScript的：

$(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php');
 });

Code on jsfiddle.

Answer 1

你将会对这个插件进行一些打击，以达到你想要的效果。以下是您所描述内容的基本示例，使用插件中有关如何提交函数而非URL的说明。

http://jsfiddle.net/nate/v6WVa/3/

// On page load, set the original value for each item
$('.edit').each(function (i, item) {
    var $item = $(item);

    $item.attr('data-original-value', $item.text());
});

$('.edit').editable(function (value, settings) {
    // Perform any checks of the value here
    if (!value) {
        alert('Field must not be empty');
        return $(this).data('original-value');       
    } else {
        // Make your own ajax call
        $.ajax({
            url: '/echo/json/',
            data: {
                value: value
            },
            complete: function () {
                console.log('saved');
            }
        });

        // On success, change the data-original-value to reflect
        // the new value        
        $(this).attr('data-original-value', value);
        return value;
    }
}, {
    onblur: 'submit'
});

在您的功能中，您可以执行任何类型的逻辑来测试值，弹出警报或消息，或者您将要做什么。然后，您需要自己进行AJAX调用以保存值。

防止用户输入空白值也会使其更加棘手。该插件似乎没有提供中断提交事件的方法，所以我能想到的最好的方法是跟踪你的上一个有效值，并在有值（如空白）的情况下将其返回给你。喜欢。

如何在提交按钮后添加字段验证

1 个答案: