Question

我正在使用 jQuery validation plugin 进行表单验证。但是，我无法为 div 设置验证。

这是我到目前为止所尝试的内容

HTML：

<form id="form">
  <div id="location" name="location"></div>
</form>

JS：

$('#form').validate({
            rules: {
            isLocationEmpty: true;
            }
});

CustomValidation Mehthod：

$.validator.addMethod('isLocationEmpty', function (value, element) {        
    var loc = $('#location').text();
    return (loc != "")
}, 'REQUIRED.');

我之前没有这样做，请提供您的建议。

Answer 1

引用OP：

“我正在使用jQuery Validation插件进行表单验证....但是我无法为div设置验证。我之前没有这样做过，请提供你的建议“。

您永远无法使用jQuery Validate插件来验证div。数据输入的正确HTML标记是使用输入元素。

此插件仅适用于以下类型的数据输入元素（每个必须具有唯一的name属性），必须属于form元素容器：

<form>

   <!-- // Input - Also including the various HTML5 input types
   // type = text, password, radio, checkbox, file, etc. -->
   <input type="text" name="something" />

   <!-- Hidden Input - 'ignore: []' must be defined in the options -->
   <input type="hidden" name="hide" />

   <!-- Select Dropdown -->
   <select name="foobar"> ... </select>

   <!-- Text Area Box -->
   <textarea name="barfoo"></textarea>

</form>

另请参阅文档中的“参考”页面：http://jqueryvalidation.org/reference/

显然OP无法更改HTML。这是一个非常丑陋的解决方法。

可用于将div的文本复制到type="hidden"元素的代码，然后可以使用插件验证隐藏元素。此代码可以随时调用，也可以放在事件处理程序中，以便在模糊或更改时触发：

$("#hidden").val( $('#div').text() );

这是相应的jQuery：

$('#form').validate({
    ignore: [], // <-- validate hidden elements
    // other options, rules, and callbacks,
});

Answer 2

我不确定你为什么要尝试验证div，但我建议把它变成textarea。如果您需要让用户“无法”进行编辑，请添加readonly属性。

<form id="form">
  <textarea id="location" name="location" readonly></textarea>
</form>

使用jQuery验证设置div的验证

2 个答案: