CODEWITHSUNDEEP
javascriptangularjs
yavg
yavg

Reputation: 3051

How to show an error message next to another

I'm doing a validation on a directive, forcing the user to check the box. If the checkbox is not marked, an error message appears. My problem is that the message shifts to the text of the checkbox.

enter image description here

I need the validation message at the end. I need to do this in the directive, I do not want to touch controller or template. How can do it?

    app.directive('validate', function ($timeout) {

        return {
            restrict: 'AE',
            require: 'ngModel', 

            link: function (scope, element, attrs, ngModel) {
              if (!ngModel){
                return;          
              }
              ngModel.$setValidity('validation', false);

              scope.directive_function= function(){
                alert("directive function");
              }

              ngModel.$parsers.push(function(val){
                if(val==true){
                  ngModel.$setValidity('validation', true);
                  var elemento_eliminar=(angular.element((document.getElementById('errorchec' ))));
                  elemento_eliminar.remove();
                }else{
                 ngModel.$setValidity('validation', false);
                 var newDirective = angular.element('<div id="errorchec" class="span_wrong" style="margin-top:5px; color:red">'+"must be required"+'</div>');
                element.after(newDirective);
                }
              })
           }


        };
    });

http://jsfiddle.net/venzoub4/

Upvotes: 1

Views: 49

Answers (3)

Claies
Claies

Reputation: 22323

<label><input type="checkbox"  ng-model="check1"  value='value1' validate />value1</label>

your HTML has a <label> with an <input> and some text value1 inside it. The input is the element which is referred to by the directive; the directive correctly put the error <div> after the input, but before the text.

Instead, you actually want the error outside the <label>. To do this, reference the .parent of the element.

element.parent().after(newDirective);

http://jsfiddle.net/b1qnny6a/

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41417

You can simply add the position:absolute css property to align the validation

<div id="errorchec" class="span_wrong" 
style="position: absolute;margin-top:5px;color:red;">must be required</div>

Demo

Upvotes: 1

mic4ael
mic4ael

Reputation: 8300

To make it appear next to the input element add display: inline-block to the div element or simply use span.

<div id="errorchec" class="span_wrong" 
     style="margin-top:5px; color:red; display: inline-block;">

Upvotes: 0

Related Questions