Edit:
Currently, I am utilizing the jquery validate plugin and have hidden all error messages initially. Upon checking a specific input field, my objective is to unhide the error message if it is invalid without causing error messages to appear in other fields preemptively. I frequently use $('#form').valid() for this purpose as it allows me to synchronize with the buttons on my page. The jquery validate plugin constantly checks if $('#form').valid() so that I can correlate it with the ON and OFF IMG buttons which are toggled using show() or hide().
At the moment, all elements within .error <div> are concealed. Is there a method to selectively unhide only the specified <div class="error">? For instance, when inspecting the 2nd input #error2 for errors, I wish to exclusively reveal
<div class="error"><div id="error2"> </div></div>$('.error this').show();
For illustration:
<div id="#form">
<input type="text" data-error="#error1"/>
<div class="error">
<div id="error1"> </div>
</div>
<input type="text" data-error="#error2"/>
<div class="error">
<div id="error2"> </div>
</div>
<input type="text" data-error="#error3"/>
<div class="error">
<div id="error3"> </div>
</div>
<img id="on">ON BUTTON</img>
<img id="off">OFF BUTTON</img>
</div>