Solved

hide specific class

Posted on 2013-11-15
8
232 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
Increase Agility with Enabled Toolchains

Connect your existing build, deployment, management, monitoring, and collaboration platforms. From Puppet to Chef, HipChat to Slack, ServiceNow to JIRA, Splunk to New Relic and beyond, hand off data between systems to engage the right people.

Connect with xMatters.

 
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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)

717 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