Previous div display inline

Question

How do I show a div (with classname) that is closest to my inputbox?

I have several inputboxes so i just need to display the specific inputbox.

In my example i want to show a div box above the input ( showing that the inputbox has wrong content i.e Numbers and not Letters ) if the inputbox has letters, the div must hide again.

So it should be a normal error report.

My Code is following:

https://jsfiddle.net/1mvb3wko/

function calculate(){

var regex = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?()]/);
var letter = /[a-zA-Z ]+/;

error1 = false;
error2 = false;
 error3 = false;

 var input = ['ID1','ID2'];
 var element;

 for(i=0;i <element.length; i++{
 element = document.getElementById(input[i]);

   if(regex.test(element.value) && letter.test(element.value)){
  element.style.border = '4px solid red';

 //Here's where i'm stuck
 //i'm trying to SHOW the previous Div with class(Errorreport) if the input is wrong 

 //$(element).prev('.Errorreport').show(); doesn't work

   }
   }

}

then it shows me all classes but i only want to get the closest(the one above)@xDreamCoding — 4reffdsfsffewf, Apr 06 '17 at 14:21
call parent() method 2 times. It will give div with class 'row'. It will give one dom element. Then call prev(), it will give previous sibling. — Prasath, Apr 06 '17 at 14:26
Possible duplicate of [Expanding a parent
to the height of its children](http://stackoverflow.com/questions/384145/expanding-a-parent-div-to-the-height-of-its-children) — 4reffdsfsffewf, Apr 07 '17 at 09:01

score 0 · Answer 1 · answered Apr 06 '17 at 14:42

Since there are already answers talking about the use of .closest I;m going to take a different approach and suggest that you remove all of those unnecessary <div> elements and focus on what you want to achieve. You want an error message to be displayed when the user types something wrong in one of the inputs.

You are better of using spans or labels, those are the elements that are often used to display form errors.

So you want a way to select all inputs. All of them have a .form-control class so you can use jQuery:

$('.form-control')

Watch for the change or blur events, whatever suits your needs and use jQuery's .parent() and .find() to find the error message and show it.

I changed a lot of your code to be cleaner and more descriptive of what it does:

https://jsfiddle.net/uf72taeu/2/

score 0 · Answer 2 · answered Apr 06 '17 at 14:51

What you expected is there, just change if condition. By default I made it true.

  function calculate(element) {

   var regex = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?()]/);
   var letter = /[a-zA-Z ]+/;

       var inputBox = $(element);//$('#'+input[i]);

       if (true/* regex.test(element.value) && letter.test(element.value) */)
       {
           var par = inputBox.parent(); // will return enclosed div   
           par = par.parent();// will return div with class 'row'   
           var errReport = par.prev(); // will return previous div, which is div with class 'row Errorreport'
           
           // do whatever in errReport
           errReport.css("display", "block");
           inputBox.css("border", "4px solid red");
       }
//    }

  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row Errorreport" style="display: none;">
  <div>Error id 1</div>
 </div>
 <div class="row">
  <div>
   <input class="autoausgabe form-control " id="ID1"
    onChange="calculate(this);">
  </div>
 </div>
 <div class="row Errorreport" style="display: none;">
  <div>Error id 2</div>
 </div>
 <div class="row">
  <div>
   <input class="autoausgabe form-control " id="ID2"
    onChange="calculate(this);">
  </div>
 </div>

Previous div display inline

2 Answers2