Solved

hide specific class

Posted on 2013-11-15
8
228 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 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
 
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

911 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

22 Experts available now in Live!

Get 1:1 Help Now