Solved

hide specific class

Posted on 2013-11-15
8
231 Views
Last Modified: 2013-11-20
I have a parent class that include some children classes upon clicking next I need to validate the field and show the error message and when it validated hide. Class errorField does not goes away

Javascript code:
 
var st = $('#subtopic').val();
	   if (!st && st.length <= 0) {
	   	var isValid = false;
		$('#subtopic').parents('div.ctrlHolder').addClass('error');
		
		 $('div.ctrlHolder').children('.errorField').css("visibility","visible");
	   }
	   else {
	   	 $('#subtopic').parents('div.ctrlHolder').removeClass('error');
		$('#subtopic').parent('div.ctrlHolder').children('.errorField').css("visibility","hidden");
	   //	 var isValid = true;
	   }

Open in new window

here is the code
<div class="ctrlHolder">
	<p generated="true" for="audienceName" class="errorField" style="visibility: visible;">This field is required.</p>
	<label for="subtopic"><em>*</em> Sub Topic</label>
	<select name="subtopic" id="subtopic" class="selectInput required">
		<option value="">Please choose a subtopic</option>
		<option value="1">(Administration) </option>						
		<option value="3">(Administration) </option>						
		<option value="4">(Templates) </option>
	</select>
        <p class="formHint"></p>
</div>

Open in new window

0
Comment
Question by:erikTsomik
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39651693
Your code works fine for me:

http://jsfiddle.net/ChrisStanyon/pVXF8/
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39652092
If I will add another field then it stop working and my form will consists of many ctrlHolder blocks

http://jsfiddle.net/pVXF8/1/
0
 
LVL 58

Expert Comment

by:Gary
ID: 39652582
I've tidied up your code to make it less repetitive and tidier

http://jsfiddle.net/GaryC123/pVXF8/4/

$('#button').click(function() {
    $(".ctrlHolder").each(function(){
        if($(".selectInput",this).val()==""){
            var isValid = false;
            $(this).addClass('error');
            $(".errorField",this).css("visibility","visible");
         }
         else {
            $('this').removeClass('error');
            $('.errorField',this).css("visibility","hidden");
         }        
    })
});

Open in new window

0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 19

Author Comment

by:erikTsomik
ID: 39652830
well the problem is not all the fields are required. For some fields no validation needed
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39653142
Just add a class to each ctrlHolder that requires validation:

//HTML
<div class="ctrlHolder required">

//jQuery selector
$(".ctrlHolder.required").each(function(){
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 39656218
This method will work fine except that I may have a different validation on each field . Not just empty field also can be a conditional validation
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39656292
We're never going to give you a specific answer if you keep moving the goalposts. Each time we've given you an answer, you've changed the requirements.

If you have different validation needs, then just use different classes and run differennt checks:

$(".ctrlHolder.required").each(function(){ 
   //code to check if the value is filled in
});

$(".ctrlHolder.email").each(function(){ 
   //code to check if it's a valid email
});

Open in new window

You may be better off just using one of the many jQuery validation plugins already written.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39656699
You just amend the code in the foreach to check the input type
...
$(".ctrlHolder").each(function(){
if($(this).attr("type")=="email"){
     // do email validation
}
else if($(this).attr("type")=="select"){
    // do select validation
}
else if($(this).attr("type")=="input"){
    //do text validation
}
....
etc

Open in new window



Weird, I didn't see Chris' comment - maybe I've not woken up yet.
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Why am I getting ReferenceError:  boxes is not defined error 5 33
Bootstrap NavBar Not Working 2 29
Google Chrome: Debugging AJAX call 6 38
Jquery syntax 12 29
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question