Question

我想验证一个网址。我正在使用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

您已经传递了函数而不是URL，您可以在调用“updateSellerOfferGeneric（）”之前进行验证

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

其中“validateUrl（）”可以是函数或正则表达式。如果要进行即时验证，还可以添加单独的事件。

例如：

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

最美妙的解决方案是使用onsubmit事件，如果网址无效，则返回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();
},

使用Jeditable插件验证URL字段

2 个答案: