jQuery 验证 - 使用多个 errorLabelContainer

发布于 2024-09-25 04:16:37 字数 525 浏览 0 评论 0原文

我有一个包含四个不同字段集的表单。对于 jQuery 验证，我希望将每个字段集中的输入错误放置在特定字段集顶部的错误块中。例如：

<fieldset id="contact">
  <legend>Contact Information</fieldset>
  <ul id="errors_contact" class="messages"></ul>
  <!-- input elements -->
</fieldset>

<fieldset id="financial">
    <legend>Financial Information</legend>
    <ul id="errors_financial" class="messages"></ul>
    <!-- input elements -->
</fieldset>

这可以通过 jQuery 验证来完成吗？

原文

I have a form with four different fieldsets. For jQuery validation, I would like the errors from the inputs in each of the fieldsets to be placed in an error block at the top of the specific fieldset. For example:

<fieldset id="contact">
  <legend>Contact Information</fieldset>
  <ul id="errors_contact" class="messages"></ul>
  <!-- input elements -->
</fieldset>

<fieldset id="financial">
    <legend>Financial Information</legend>
    <ul id="errors_financial" class="messages"></ul>
    <!-- input elements -->
</fieldset>

Can this be done with jQuery validation?

分享到QQ

分享到微博

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

发布评论

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

套路撩心 2024-10-02 04:16:37

它不能专门使用 errorLabelContainer，代码中有一个 errorLabelContainer 设置/存储，但是你可以使用 errorPlacement 和 wrapper 选项 >您想要的效果，例如：

$("form").validate({
  wrapper: "li",
  errorPlacement: function(label, elem) {
    elem.closest("fieldset").find(".messages").append(label);
  }
});

而不是标准的 .insertAfter() （通常将放在与其一起的元素后面），这会将其包装在

中，并且将其附加到当前

的 .messages 容器中。

It can't using errorLabelContainer specifically, there's one setting/store for errorLabelContainer in the code, but you can use the errorPlacement and wrapper options for the effect you want, for example:

$("form").validate({
  wrapper: "li",
  errorPlacement: function(label, elem) {
    elem.closest("fieldset").find(".messages").append(label);
  }
});

Instead of the standard .insertAfter() (normally placing the <label> after the element it goes with), this wraps it in a <li></li> and appends that to the .messages container for the current <fieldset>.

回复收藏 0 原文

吲‖鸣 2024-10-02 04:16:37

我是这样做的：

我有一个表单必须验证多个控件 - 但我想要一个错误区域 - 以及一条消息 - 一行。

默认情况下，如果您使用 errorLabelContainer，它将验证作为“附加组件” - 即多个验证会在错误标签中创建许多行。
我注意到一件事 - 如果 labelcontainer 的高度小于 30px，它会第二次创建一个新的空行。我不知道为什么。

就我而言，它是一个标签 - 当然，它也可以是一个 div。在我的 HTML 中，我有这个（假设您有 jQueryvalidation.js 和基础）：

Myform 是表单的名称 - 然后是不同的 HTML 控件 - 任何类型 - 例如：

INPUT id=theNameofcontrol type=checkbox name =theNameofcontrol validate=required:true

然后是错误消息的容器（不知道如何让它看起来像 HTML :)

label id=errorlabel name=errorlabel style=font-size:1.3em ;高度:30;颜色:红色; /label

在表单的 onclick 函数中，我将空消息作为错误消息，如果表单无效则放置一条消息，如果无效则返回 false（所以我不发布它。

）当然，你可以只填写每一条自定义消息 - 但我想要一行，无论有多少错误。

$("#MyForm").validate(<br>
{<br>
errorLabelContainer:"#errorlabel",<br>
messages : <br>
    {theNameofcontrol: {required: "" },<br>
    theNameofcontrol2: {required: "" },<br>
    theNameofcontrol3: {required: "" }<br>
    }   <br>
);<br>
<br>
 if(! $("#MyForm").valid())<br>
{<br>
$("#errorlabel").html("My message when not all contols are valid!");<br>
return false;<br>
}

希望这对您有帮助。如果您有一个包含组中所有“对象”的容器，您应该能够对字段集执行相同的操作。

验证您使用的一个控件：

$("#MyForm").validate({errorLabelContainer:"#errorlabel",messages :{theNameofcontrol: {required: "This has to have a value" }}}).element("#theNameofcontrol");

祝你好运

I did it this way:

I had a form that had to validate multiple controls - but I wanted one area of error - and one message for all - one line.

Default if you use errorLabelContainer it puts the validations as "add-ons" - that is multiple validations create many rows in the errorlabel.
I noticed one thing - if it had the height of labelcontainer less than 30px, it made a new empty row second time. I don't know why.

In my case it's a label - but it can be a div too, of course. In my HTML I have this (assuming you have the jQuery validation.js and base):

Myform is the name of the form - then the different HTML controls - any type - for example:

INPUT id=theNameofcontrol type=checkbox name=theNameofcontrol validate=required:true

Then the container for the error message (don't know how to make it look like HTML :)

label id=errorlabel name=errorlabel style=font-size:1.3em;height:30;color:red; /label

In my onclick function for the form, I put empty messages as errormessages and put a message if the form wasn't valid and return false if it isn't (so I don't post it.)

Of course you can just fill in every custom message - but I wanted to have one line regardless of how many errors.

$("#MyForm").validate(<br>
{<br>
errorLabelContainer:"#errorlabel",<br>
messages : <br>
    {theNameofcontrol: {required: "" },<br>
    theNameofcontrol2: {required: "" },<br>
    theNameofcontrol3: {required: "" }<br>
    }   <br>
);<br>
<br>
 if(! $("#MyForm").valid())<br>
{<br>
$("#errorlabel").html("My message when not all contols are valid!");<br>
return false;<br>
}

Hope this is helpful for you. You should be able to do the same for the fieldset if you have a container for all the "objects" in the group.

To validate one control you use:

$("#MyForm").validate({errorLabelContainer:"#errorlabel",messages :{theNameofcontrol: {required: "This has to have a value" }}}).element("#theNameofcontrol");

Good luck

回复收藏 0 原文

~没有更多了~