11

Using Parsley.js, is it possible to specify the element that should hold the error messages? I tried:

$('#myForm').parsley({
    errors: {
        container: {
            $('#errorMessages')
        }
    }
});

But the error messages are still placed right after my form inputs.

Charles
  • 50,943
  • 13
  • 104
  • 142
Alix Axel
  • 151,645
  • 95
  • 393
  • 500

6 Answers6

34

I've added another data-attribute, data-parsley-errors-container="#element". That could allow you modify the DOM to specify where the error messages will be displayed.

More info here: http://parsleyjs.org/doc/index.html#ui-for-field

Best

Hunter Turner
  • 6,804
  • 11
  • 41
  • 56
guillaumepotier
  • 7,369
  • 8
  • 45
  • 72
6

I returned true from the function provided with container key.

My HTML Element

<input type="text" class="input-small" errorSpan="yyy"  id="ddd" name="ddd" value="" data-required="true">
<span id="yyy"></span>

Javascript

$('#abc').parsley({
            errors: {
                classHandler: function ( elem ) {}
              , container: function ( elem, template, isRadioOrCheckbox ) {
                   //here i have span msg. id to be displayed as custom attribute in input element
                    $('#' + $(elem).attr('errorSpan')).html(template);
                    return true;//returning back boolean makes it work
                  }
              , errorsWrapper: '<ul></ul>'
              , errorElem: '<li></li>'
              }
        });

It also works if I return 

return $('#' + $(elem).attr('errorSpan')).html(template);

Hope this helps......

baba.kabira
  • 3,111
  • 2
  • 26
  • 37
3

You'll need to use a callback function to do so

Here a simple example to attach error messages to element parent for example.

$('#myForm').parsley({
    errors: {
        container: function ( elem ) {
            return $( elem ).parent();
        }
    }
});

EDIT: Working on 1.1.10-dev, I changed the way to define the errors container like above. Careful, this is a BC Break;

guillaumepotier
  • 7,369
  • 8
  • 45
  • 72
  • I also faced problem like tanin, can you confirm is there something that we are missing, I posted a solution, not sure its appropriate but it works for me :). – baba.kabira Feb 01 '13 at 18:39
  • My bad. The above behavior was an early implementation, not valida anymore. Your solution is right. But thinking to that now, I find not very handy this customization way, inserting a template inside your element. Maybe I should return to my above implementation, more simple and readable where you just have to return a dom element where template will be inserted by Parsley? – guillaumepotier Feb 02 '13 at 16:14
2

data-parsley-errors-container="#your-div-id" worked for me

<div class="form-group">
  <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Start Time</label>
  <div class="col-md-6 col-sm-6 col-xs-12">
       <div class=" datetimepicker3 input-append timepick">
          <input class="form-control" data-format="hh:mm" placeholder="HH:MM" type="text" name="startTime" data-parsley-errors-container="#startTimeErrorContainer" required="required"  id="startTime" />
          <span class="add-on"><i class="fa fa-clock-o icon-time"></i></span>  
       </div>   
      <div id="startTimeErrorContainer"></div>                                            
  </div>

Siva Anand
  • 2,872
  • 2
  • 18
  • 9
1

@guillaumepotier I have try your code on jquerymobile and I do not show any error message display on screen. I want to add error-message to class "help-inline"

index.html

<script src="js/vendor/parsley.message.th.js"></script>
<script src="js/vendor/parsley.extend.min.js"></script>
<script src="js/vendor/parsley.min.js"></script>

...

<div class="control-group">
    <label class="control-label" for="A0_C1">From<i class="required-icon"></i></label>
    <div class="controls">
        <input type="text" id="A0_C1" name="A0_C1" value="" required="required" />
        <span class="help-inline"></span>
    </div>
</div>

parsley.message.th.js

window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, { 
    errors: {
        container: function ( elem ) {
            return $(elem).parent().find(".help-inline");
        }
    }
});

UPDATE - Working solution on v1.1.9-dev

return $(elem).closest('.controls').find('.help-inline').append(template);
GiVeR
  • 461
  • 1
  • 5
  • 8
  • Yes indeed. Sorry. It was working on a previous implementation. @gbagga answer is correct, though not very handy nor simple. I think I'll go back to my answer implementation in 1.1.9.. – guillaumepotier Feb 02 '13 at 16:16
  • I have update my solution. But I'm not sure this is the correct way to do in the future. – GiVeR Feb 04 '13 at 04:16
  • Sure. May be best to just return an elem where Parsley will append its stuff inside. And not have to deal with `template` in this function. What do you think about that? – guillaumepotier Feb 05 '13 at 14:59
  • Changed on 1.1.10-dev now; It will match my above answer. Careful, this is a BC Break; – guillaumepotier Feb 10 '13 at 20:57
1

Just define classHandler function before Parsley library import, in my case, i'm using bootstrap and it's to apply error and valid classes on parent div (it has "form-group" class).

<script>
    window.ParsleyConfig = {
      classHandler: function ( parsleyField) {
      // specify where parsley error-success classes will be set
      return parsleyField.$element.parent();
      // Change this to change the element to apply too
      },
    };
</script>

Now just add data-parsley validate to your form tag : 

<form  method="post" id="form1" data-parsley-validate>

When using bootstrap, you need to specify bootstrap error and valid classes too

<form method="post" id="form1" data-parsley-error-class="has-error" data-parsley-success-class="has-success" data-parsley-validate>

In order to get the "has-error" class set on the parent div on invalid/error state (same for valid too):

<div class="form-group has-error">
    <label>Name</label>
    <input class="form-control" type="text" id="name" name="name" required="" data-parsley-trigger="keyup" data-parsley-minlength="5">
    <p class="help-block">Example help text here.</p>
</div>

This solution global to all fields.

Cherif KAOUA
  • 834
  • 12
  • 21