使用 Jeditable 插件验证 URL 字段

Question

我想验证 URL。 我正在使用 jquery 插件 jeditable。 我希望有人单击该字段并输入无效的 URL 时显示错误。

这是我的代码。 我该如何修改。 请帮忙

$(function() {
 $("#url").editable(
         function(data)
         {seller=new BHSeller();
          seller.updateSellerOfferGeneric('need_url',data,<?php echo $need_id?>);}
         , { 
      indicator : "<img src='layout/images/loader.gif'>",
      type : 'text',
         width:'450px', 
          select : true, 
          submit : 'Save', 
        cssclass : "editable", 
        style  : "display:inline"
  });
});

如何在上面的代码中添加验证。

Answer 1

您已经传递了 function 而不是 URL，您可以在调用“updateSellerOfferGeneric()”之前进行验证

function(url) {
    if (validateUrl(url) {
        seller = new BHSeller();
        seller.updateSellerOfferGeneric('need_url', url, <?php echo $need_id; ?>);
    } else {
        // Show error message
    }
}

其中“validateUrl()”可以是 function 或正则表达式。 如果您想要即时验证，还可以添加单独的事件。

例如：

$('#url').bind('keyup', function() {
    if (!validateUrl(this.value)) {
        // Show error message
    }
});

最好的解决方案是使用 onsubmit 事件并在 url 无效时返回 false：

$('#url').editable(function(value) {
    seller=new BHSeller();
    seller.updateSellerOfferGeneric('need_url',data,<?php echo $need_id?>);
    return value;
}, {
    submit: 'Save',
    width: 200,
    placeholder: 'Enter URL...',
    onblur: 'submit',
    onsubmit: function() {
        var value = $(':input', this).val();

        if (!validateUrl(value)) {
            // Show error message...

            // Prevent form submission
            return false;
        }
    }
});

Answer 2

onsubmit: function (settings, original) {
    var myForm = $('form', original);
    $(myForm).validate({
        rules: {
            value: { url: true} //from jEditable configuration of ... name: 'value',...
        },
        messages: {
            value: { url : 'YOUR MESSAGE COMES HERE' }
        },
        onkeyup: false
    });
    return $('form', original).valid();
},