Numbering dynamic list in jquery validation

Question

I'm trying to get the top list to display the visible list items in numeric form.

To do this, I'm trying to say... on "Continue" click, find the visible list items and wrap them in <li></li>.

$('.btn-submit-val').on('click', function() {
    $('.error-menu a > label:visible').wrap('<li></li>');
    $('.error-menu a > label:hidden').unwrap('<li></li>');
});

So if you have a list like this:

<ol class="error-message-container error-menu">
  <a href="#firstName"><label class="error" for="firstName" generated="true" style="display:none;"></label></a>
  <a href="#lastName"><label class="error" for="lastName" generated="true"></label></a>
</ol>

Then the page will show:

1. [last name error]

And it WON'T show:

1. 2. [last name error]

So basically, if the error isn't there, it won't show on the page, and it won't be in numeric list order.

If you validate a field on the page currently, the number will still show next to it. I want the number to be removed and the numeric order to be preserved. Is this possible?

Fiddle: https://jsfiddle.net/DTcHh/25848/

Answer 1

Your problem stems from this:

$('.error-menu a > label:hidden').unwrap('<li></li>');

where the elements are not getting unwrapped. This is probably better in a way because you want to preserve the order of your items.

You could then easily solve your problem if you hid the entire element after the form field is validated.

Now as to why your element is not getting unwrapped, I suggest reading up on the difference between visibility:hidden and display:none because you use display:none to hide your elements but check for visibility:hidden.

I suggest adding the <li></li> to your markup and changing their visibility in the same way that you change the visibility of the label. In this way there is no need to wrap/unwrap elements. Instead you can just leverage 2 css classes: .hide{display:none}.show{display:block;} and added them via .addClass()/.removeClass() which you are already using in a part of your code.

I hope this helps.