Custom placement of violation messages

[nishadk123]

Hello, I would like to have a custom placement of the violation messages. I saw that the violation message structure can be updated, but is there a way for custom placement?

Here is what it looks like now,

<div valdr-form-group="" class="form-group ng-invalid valdr-invalid-dirty-touched-group">
    <label class="col-sm-3 control-label" for="Name">Name</label>
         <div class="col-sm-9">
               <input type="text" placeholder="What is your name?" data-ng-model="user.Name" id="Name" name="Name" class="form-control ng-dirty ng-valid-parse ng-empty ng-invalid ng-invalid-valdr-required ng-invalid-valdr ng-touched" style="">
          </div>
          <div class="valdr-message ng-binding ng-isolate-scope ng-dirty ng-invalid ng-touched" valdr-message="Name">Please enter your name!</div>
</div> 

This is what i am looking to achieve,

<div valdr-form-group="" class="form-group ng-invalid valdr-invalid-dirty-touched-group">
    <label class="col-sm-3 control-label" for="Name">Name</label>
         <div class="col-sm-9">
               <input type="text" placeholder="What is your name?" data-ng-model="user.Name" id="Name" name="Name" class="form-control ng-dirty ng-valid-parse ng-empty ng-invalid ng-invalid-valdr-required ng-invalid-valdr ng-touched" style="">
               <div class="help-block valdr-message ng-binding ng-isolate-scope ng-dirty ng-invalid ng-touched" valdr-message="Name">Please enter your name!</div>
          </div>
</div>

[nishadk123]

Hello,

I managed to achieve this by adding the valdr-form-group where i needed the violations to be appended as below,

<div  class="form-group ng-invalid valdr-invalid-dirty-touched-group">
    <label class="col-sm-3 control-label" for="Name">Name</label>
         <div class="col-sm-9" valdr-form-group="">
               <input type="text" placeholder="What is your name?" data-ng-model="user.Name" id="Name" name="Name" class="form-control ng-dirty ng-valid-parse ng-empty ng-invalid ng-invalid-valdr-required ng-invalid-valdr ng-touched" style="">
               <div class="help-block valdr-message ng-binding ng-isolate-scope ng-dirty ng-invalid ng-touched" valdr-message="Name">Please enter your name!</div>
          </div>
</div>

But the problem now is that we wont be able to highlight the labels for violations. Is there a way out to achieve both the scenarios?

[nishadk123]

Hello,

Achieved it with the following,

<div  valdr-form-group=""  class="form-group ng-invalid valdr-invalid-dirty-touched-group">
    <label class="col-sm-3 control-label" for="Name">Name</label>
         <div class="col-sm-9">
               <input type="text" placeholder="What is your name?" data-ng-model="user.Name" id="Name" name="Name" class="form-control ng-dirty ng-valid-parse ng-empty ng-invalid ng-invalid-valdr-required ng-invalid-valdr ng-touched" style="">
         </div>
          <div class="col-sm-9 col-sm-offset-3 help-block valdr-message ng-binding ng-isolate-scope ng-dirty ng-invalid ng-touched" valdr-message="Name">Please enter your name!</div>
</div>

Thanks for the awesome plugin!