[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

hide specific class

Posted on 2013-11-15
8
Medium Priority
?
239 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 45

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 45

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 45

Accepted Solution

by:
Chris Stanyon earned 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses
Course of the Month18 days, 14 hours left to enroll

834 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