CODEWITHSUNDEEP
jqueryjquery-validate
myroman
myroman

Reputation: 591

jQuery validation separate error labels for a control

I've got a requirement to validate an input - if it's empty then show a text under it and an asterisk on the right. So, the labels should be in different containers and have different text. The code below works until you input something and erase, it'll show you two completely identical labels. Are there any ways to create separate labels?

Markup.

<div class='wrapper'>
  <input type='text' class='image-name' />
</div>

<input type='submit' />

JS

  var validator = $('form').validate({
    errorPlacement: function (error, element) {
      if (element.attr('class', 'image-name')) {
        error.addClass('b-gallery__validation-message');
        error.insertAfter(element.parent());

        // creating an asterisk 
        var asterisk = error.clone()
          .addClass('b-gallery__validation-star')
          .removeClass('b-gallery__validation-message')
          .text('*');
        asterisk.insertAfter(element);
      }
    }      
  });
  validator.form();

Upvotes: 0

Views: 415

Answers (1)

Sparky
Sparky

Reputation: 98758

You're trying to do too much within the errorPlacement callback function. It's only fired upon a validation error to place the message label within the layout... it's not fired for all the other things you also want to do.

I suggest that you read the documentation for each callback function, and restructure your code accordingly.

errorPlacement is used for layout. When an element is invalid, this callback function tells where to place the element on the form. The default is after the element being validated.

success is used to control the label when the element is valid. In other words, by default, there is no label when the element is valid, so by using this callback, you can generate one. Typically, people will use this for placing a icon next to valid elements, like a check-mark.

highlight is triggered whenever there is a validation error and it's used for toggling the default error and valid classes on the element being tested.

unhighlight is triggered whenever the validation error is corrected and it's used for toggling the default error and valid classes on the element being tested. It's the exact opposite of highlight and should be installed whenever highlight is installed.

Upvotes: 1

Related Questions