Solved

hide specific class

Posted on 2013-11-15
8
227 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
  • 3
  • 3
  • 2
8 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Your code works fine for me:

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

Author Comment

by:erikTsomik
Comment Utility
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
Comment Utility
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
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
well the problem is not all the fields are required. For some fields no validation needed
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
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
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now