Solved

Jquery Validate Plugin, Textfield error message needed when certain checkbox is selected.

Posted on 2010-09-19
26
464 Views
Last Modified: 2012-05-10
Hi,

When I hit submit a error message is visible after the textfield but that error only has to be vissible when the checkbox  (last one) is selected.
error
You can find the form here:
http://www.expanism-webdesign.nl/test/

I hope some one can help.

Thanks,
Edski
0
Comment
Question by:edski73
  • 14
  • 8
  • 3
  • +1
26 Comments
 
LVL 6

Expert Comment

by:DalHorinek
ID: 33711841
Maybe something like this might work

rules: {
  ...
   vraag2e: function(element) {
       return ( $("#e2:checked") && !$(element).is(":empty") );
   }
}
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33711851
More or less like this...

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">
        label.error {
            float: none; color: red;
            padding-left: .3em; vertical-align: top;  
        }
    </style>
    <script type="text/javascript"
        src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js">
    </script> 

    <script type="text/javascript">
        $.validator.addMethod('chekk', function(value, ele) {
			if($('#chekk').is(':checked')){
				if($("#chekkInp").val() == ""){
					return false;
				}
				return true;
			}
            return true;
        }, 'Please enter a valid value')

        $(document).ready(function() {
            $("#form1").validate({
                rules: {
                    chekk: {
                        chekk: true
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo('#err');
                }
            });
        });
    </script>
<title></title>
</head>
<body>
<form id="form1">      
        <input type="checkbox" id="chekk" name="chekk" />Check this and you have to enter the vaue below<br />
		<input id="chekkInp" name="chekkInp" type="text" />
    <div id="err"></div>
    <input id="btnSubmit" type="submit" value="submit" />
</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:edski73
ID: 33714063
Hi kadaba,

I need it to have work it together with the other checkbox group you can see it here:
http://www.expanism-webdesign.nl/test

Thanks,
Edski
0
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33714068
this worked for me, please test
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"><head><title>Test</title>



<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="Test_files/jquery-1.js"></script>
<script type="text/javascript" src="Test_files/jquery.js"></script>

<style type="text/css">

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height: 18px;
	color: #555;
	margin: 0 auto 0 auto;
	padding: 0; }

form.cmxform label.error { display: none; }	

#form1 label.error, form.cmxform label.error, label.error {
	margin-left: 10px;
	width: auto;
	color: red;
	font-style: italic;
	padding:0;
	cursor:default; }
	
label { cursor: pointer; }

#form1 { width: 670px; }
#form1 p { margin:0 0 0 13px;}

input.textfield { width:370px; border: 1px solid #ccc; padding:3px; }
input.textfield-anders { width:270px; border: 1px solid #ccc; padding:3px; }

textarea {border: 1px solid #ccc; padding:3px; width:370px; height:150px; }

input.checkbox { border: none; }
input:focus, textarea:focus { border: 1px dotted #555; }
input.textfield.error, input.textfield-anders.error, textarea.error { border: 1px dotted red; }

fieldset .bgone, fieldset .bgtwo { border:none; padding-top:10px; margin-left:10px; margin-right:8px; }
fieldset .bgone { background-color:#ccc; }
fieldset .bgtwo { background-color:#fff; }
fieldset { border:none; margin-top:10px; padding:0; }

.left-margin-enquete { margin-left:25px;}

button {
	outline: none; 
	border:2px solid #000; 
	cursor:pointer; 
	padding:10px;
	text-align:center; 
	float: left; 
	width: auto; 
	background-color: #ccc;}

</style><!--[if IE]>
	<style type="text/css">
		/* style exceptions for all IE browsers */
		button { width:auto; overflow:visible; }
		button span { margin-top:1px; }
	</style>
<![endif]-->



<script type="text/javascript">

jQuery.noConflict();
jQuery(document).ready(function($){
		
	$("#form1").validate({
		
		rules: {
		"vraag2[]": { required: true, minlength: 1 },
		vraag2e: "required"
},
					
		messages: {
		"vraag2[]": "Maak tenminste één keuze",
		vraag2e: "Verplicht veld"
},
				
errorPlacement: function(error, element) {
				var trigger = element.next('.push');
				    error.insertAfter(trigger.length > 0 ? trigger : element);
}

});

$("#e2").bind("click", function(){
	if( $(this).attr('checked') )
	{
		$("#anders").removeAttr('disabled');
	}
	else
	{
		$("#anders").attr('disabled', true);
	}
});

});
</script></head><body id="enquete">
<form class="cmxform" id="form1" action="#" method="post">
<fieldset class="bgtwo">
<p><strong>2. Welke diensten ziet u graag worden uitgevoerd? (Meerdere antwoorden mogelijk)</strong></p>
<p>
<input value="Surveillance" name="vraag2[]" id="a2" type="checkbox"> <label for="a2" class="push">Surveillance</label><br>
<input value="Noodnummer" name="vraag2[]" id="b2" type="checkbox"> <label for="b2">Noodnummer</label><br>
<input value="EHBO" name="vraag2[]" id="c2" type="checkbox"> <label for="c2">Eerste Hulp Bij Ongelukken (EHBO)</label><br>
<input value="Herstel geleden schade" name="vraag2[]" id="d2" type="checkbox"> <label for="d2">Herstel geleden schade</label><br>
<input value="Anders namelijk:" name="vraag2[]" id="e2" type="checkbox"> <label for="e2">Anders</label>
<label for="anders" class="push">namelijk:</label>
<input id="anders" class="textfield-anders" name="vraag2e" type="text" disabled>
</p>
<br>
<button type="submit" id="wlpeRegisterButton" name="serviceButtonValue" value="Send" class="submitBtn"><strong>Send</strong></button>
<br>
</fieldset>
</form>
</body></html>

Open in new window

0
 

Author Comment

by:edski73
ID: 33714480
Hi gurvinder372,

Thanks, but it is not working I have it placed in the form where it is part off, could you please check it?

http://www.lshsecurity.nl/test

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33714532
Did it worked in the sample page which you shared?

Also i am not able to see any checkboxes and textbox in the link that you have shared now. It asked for a user/password also.
0
 

Author Comment

by:edski73
ID: 33714549
Hi gurvinder372,

Sorry I had a htaccess inside I have removed it.

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33714591
line number 282 should be

<input id="anders" class="textfield-anders" name="vraag2e" type="text" disabled/>
0
 

Author Comment

by:edski73
ID: 33714635
Hi gurvinder372,

I added disabled, it works for a part... but if I unchecked it the error message remains but must be removed.
Also It is not valid xhtml strict anymore with disabled, is there an other way?

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33714695
well, i gave the following code into validator http://validator.w3.org/check , it gave me 1 warning, 0 errors. hope this is ok
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl"><head><title>Test</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="Test_files/jquery-1.js"></script>
<script type="text/javascript" src="Test_files/jquery.js"></script>

<style type="text/css">

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height: 18px;
	color: #555;
	margin: 0 auto 0 auto;
	padding: 0; }

form.cmxform label.error { display: none; }	

#form1 label.error, form.cmxform label.error, label.error {
	margin-left: 10px;
	width: auto;
	color: red;
	font-style: italic;
	padding:0;
	cursor:default; }
	
label { cursor: pointer; }

#form1 { width: 670px; }
#form1 p { margin:0 0 0 13px;}

input.textfield { width:370px; border: 1px solid #ccc; padding:3px; }
input.textfield-anders { width:270px; border: 1px solid #ccc; padding:3px; }

textarea {border: 1px solid #ccc; padding:3px; width:370px; height:150px; }

input.checkbox { border: none; }
input:focus, textarea:focus { border: 1px dotted #555; }
input.textfield.error, input.textfield-anders.error, textarea.error { border: 1px dotted red; }

fieldset .bgone, fieldset .bgtwo { border:none; padding-top:10px; margin-left:10px; margin-right:8px; }
fieldset .bgone { background-color:#ccc; }
fieldset .bgtwo { background-color:#fff; }
fieldset { border:none; margin-top:10px; padding:0; }

.left-margin-enquete { margin-left:25px;}

button {
	outline: none; 
	border:2px solid #000; 
	cursor:pointer; 
	padding:10px;
	text-align:center; 
	float: left; 
	width: auto; 
	background-color: #ccc;}

</style><!--[if IE]>
	<style type="text/css">
		/* style exceptions for all IE browsers */
		button { width:auto; overflow:visible; }
		button span { margin-top:1px; }
	</style>
<![endif]-->



<script type="text/javascript">

jQuery.noConflict();
jQuery(document).ready(function($){
		
	$("#form1").validate({
		
		rules: {
		"vraag2[]": { required: true, minlength: 1 },
		vraag2e: "required"
},
					
		messages: {
		"vraag2[]": "Maak tenminste één keuze",
		vraag2e: "Verplicht veld"
},
				
errorPlacement: function(error, element) {
				var trigger = element.next('.push');
				    error.insertAfter(trigger.length > 0 ? trigger : element);
}

});

$("#e2").bind("click", function(){
	if( $(this).attr('checked') )
	{
		$("#anders").removeAttr('disabled');
	}
	else
	{
		$("#anders").attr('disabled', true);
	}
});

});
</script></head><body id="enquete">
<form class="cmxform" id="form1" action="#" method="post">
<fieldset class="bgtwo">
<p><strong>2. Welke diensten ziet u graag worden uitgevoerd? (Meerdere antwoorden mogelijk)</strong></p>
<p>
<input value="Surveillance" name="vraag2[]" id="a2" type="checkbox"/> <label for="a2" class="push">Surveillance</label><br/>
<input value="Noodnummer" name="vraag2[]" id="b2" type="checkbox"/> <label for="b2">Noodnummer</label><br/>
<input value="EHBO" name="vraag2[]" id="c2" type="checkbox"/> <label for="c2">Eerste Hulp Bij Ongelukken (EHBO)</label><br/>
<input value="Herstel geleden schade" name="vraag2[]" id="d2" type="checkbox"/> <label for="d2">Herstel geleden schade</label><br/>
<input value="Anders namelijk:" name="vraag2[]" id="e2" type="checkbox"/> <label for="e2">Anders</label>
<label for="anders" class="push">namelijk:</label>
<input id="anders" class="textfield-anders" name="vraag2e" type="text" disabled="disabled"/>
</p>
<br/>
<button type="submit" id="wlpeRegisterButton" name="serviceButtonValue" value="Send" class="submitBtn"><strong>Send</strong></button>
<br/>
</fieldset>
</form>
</body></html>

Open in new window

0
 

Author Comment

by:edski73
ID: 33714746
Hi gurvinder372,

Thanks that part works, but the error remains when unchecked agian.
Is there a way to have the error removed when uncheck the checkbox?

Thanks,
Edski
0
 

Author Comment

by:edski73
ID: 33714841
Hi gurvinder372,

You can see it here if unchecked after being checked the error message remains

http://www.lshsecurity.nl/test/

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33714860
Yes, i noticed. Gimme some time.
0
 

Author Comment

by:edski73
ID: 33714943
Ok, thanks for your help!

Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33714948
i called the click event on submit button, which seems to remove the error,
$("#e2").bind("click", function(){
      if( $(this).attr('checked') )
      {
            $("#anders").removeAttr('disabled');
      }
      else
      {
            $("#anders").attr('disabled', true);
            $("#wlpeRegisterButton").click();
      }
});
0
 

Author Comment

by:edski73
ID: 33715032
Hi gurvinder372,

It is getting strange in here, when I check and uncheck the form is automatic being submitted, please take a look:
http://www.lshsecurity.nl/test/

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33715123
huh, found something :)

$("#e2").bind("click", function(){
      if( $(this).attr('checked') )
      {
            $("#anders").removeAttr('disabled');
      }
      else
      {
            $("#anders").attr('disabled', true);
            $("#form1").validate().form();
      }
});

please try

0
 

Author Comment

by:edski73
ID: 33715323
Hi gurvinder372,

Thanks! only one tiny detail, the border stays red if unchecked again.

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33715354
Grrrrr... :)

try this

$("#e2").bind("click", function(){
      if( $(this).attr('checked') )
      {
            $("#anders").removeAttr('disabled');
      }
      else
      {
            $("#anders").attr('disabled', true);
            $("#form1").validate().form();
            $("#anders").css('border-style', "solid");
            $("#anders").css('border-color', "#CCCCCC");
      }
});
0
 

Author Comment

by:edski73
ID: 33715491
Hi gurvinder372,

Yeah you can say that, this form is driving us insane :)

It is almost perfect, one tiny little detail hope you can fix this.

Try this:
1. Check the checkbox and hit submit (everything works ok! :)
2. Uncheck the checkbox and Check it right again and then hit submit again, the border has to be red but it's not.

Thanks,
Edski
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33715776
I see gurivnder is trying to help you out, sorry I could not as I was not around.
I just put a small example to show how this would work with the check box group.

See if you want to use this because you might have used the one given by gurvinder.

Best,
kadaba

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

<style type="text/css">

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height: 18px;
	color: #555;
	margin: 0 auto 0 auto;
	padding: 0; }

form.cmxform label.error { display: none; }	

#form1 label.error, form.cmxform label.error, label.error {
	margin-left: 10px;
	width: auto;
	color: red;
	font-style: italic;
	padding:0;
	cursor:default; }
	
label { cursor: pointer; }

#form1 { width: 670px; }
#form1 p { margin:0 0 0 13px;}

input.textfield { width:370px; border: 1px solid #ccc; padding:3px; }
input.textfield-anders { width:270px; border: 1px solid #ccc; padding:3px; }

textarea {border: 1px solid #ccc; padding:3px; width:370px; height:150px; }

input.checkbox { border: none; }
input:focus, textarea:focus { border: 1px dotted #555; }
input.textfield.error, input.textfield-anders.error, textarea.error { border: 1px dotted red; }

fieldset .bgone, fieldset .bgtwo { border:none; padding-top:10px; margin-left:10px; margin-right:8px; }
fieldset .bgone { background-color:#ccc; }
fieldset .bgtwo { background-color:#fff; }
fieldset { border:none; margin-top:10px; padding:0; }

.left-margin-enquete { margin-left:25px;}

button {
	outline: none; 
	border:2px solid #000; 
	cursor:pointer; 
	padding:10px;
	text-align:center; 
	float: left; 
	width: auto; 
	background-color: #ccc;}

</style>

<!--[if IE]>
	<style type="text/css">
		/* style exceptions for all IE browsers */
		button { width:auto; overflow:visible; }
		button span { margin-top:1px; }
	</style>
<![endif]-->

<script type="text/javascript">

jQuery.noConflict();

jQuery(document).ready(function($){

	$("input[name=vraag2\\[\\]]").click(function(){
		if(($(this).hasClass("depends")) && (!$(this).is(':checked'))){
			$("#anders").removeClass("error");
			$("label[for=anders]").hide();
		}
	});
	
	$("input[name=vraag5\\[\\]]").click(function(){
		if(($(this).hasClass("depends")) && (!$(this).is(':checked'))){
			$("#anders2").removeClass("error");
			$("label[for=anders2]").hide();
		}
	});
	
	$("#form1").validate({
		
		rules: {
		"vraag2[]": { required: true, minlength: 1 },
		"vraag5[]": { required: true, minlength: 1 },
		anders: {
				required: '#e2:checked'
		},
		anders2: {
				required: '#e5:checked'
		}
},
					
		messages: {
		"vraag2[]": "Maak tenminste één keuze",
		"vraag5[]": "Maak tenminste één keuze",
		anders:"Verplicht veld",
		anders2: "Verplicht veld"
},
				
errorPlacement: function(error, element) {
				var trigger = element.next('.push');
				    error.insertAfter(trigger.length > 0 ? trigger : element);
}

});

});

</script>

</head>
<body id="enquete">
<form class="cmxform" id="form1" action="#" method="post">
<fieldset class="bgtwo">

<p>
	<strong>2. Welke diensten ziet u graag worden uitgevoerd? (Meerdere antwoorden mogelijk)</strong>
</p>

<p>
	<input type="checkbox" value="Surveillance" name="vraag2[]" id="a2" />
	<label for="a2" class="push">Surveillance</label><br />
	
	<input type="checkbox" value="Noodnummer" name="vraag2[]" id="b2" />
	<label for="b2">Noodnummer</label><br />
	
	<input type="checkbox" value="EHBO" name="vraag2[]" id="c2" />
	<label for="c2">Eerste Hulp Bij Ongelukken (EHBO)</label>
	<br />
	
	<input type="checkbox" value="Herstel geleden schade" name="vraag2[]" id="d2" />
	<label for="d2">Herstel geleden schade</label>
	<br />
	
	<input type="checkbox" value="Anders namelijk:" name="vraag2[]" class="depends" id="e2" />
	<label for="e2">Anders</label>
	
	<label for="anders" class="push">namelijk:</label>
	<input id="anders" class="textfield-anders" name="anders" type="text" />
</p>
<br/>

<fieldset class="bgone">
<p><strong>5. Om problemen en vragen te communiceren is er een communicatie medium nodig.<br /> Welk medium heeft uw voorkeur?</strong></p>
<p>
<input type="checkbox" value="Periodieke vergaderingen" name="vraag5[]" id="a5" /> <label for="a5" class="push">Periodieke vergaderingen</label><br />
 
<input type="checkbox" value="Hyves, Twitter, Facebook etc." name="vraag5[]" id="b5" /> <label for="b5">Hyves, Twitter, Facebook etc.</label><br />
<input type="checkbox" value="internettoepassing" name="vraag5[]" id="c5" /> <label for="c5">internettoepassing waarop enkel deelnemers kunnen inloggen, hun eigen account beheren<br /> <span class="left-margin-enquete">en elkaar daarmee tevens op de hoogte kunnen houden.</span></label><br />
<input type="checkbox" value="SMS" name="vraag5[]" id="d5" /> <label for="d5">SMS</label><br />
<input type="checkbox" value="Anders namelijk:" name="vraag5[]" class="depends" id="e5" /> <label for="e5">Anders</label>
<label for="anders2" class="push">namelijk:</label>
<input id="anders2" class="textfield-anders" name="anders2" type="text" />
</p>
</fieldset>

<br/>

<button type="submit" id="wlpeRegisterButton" name="serviceButtonValue" 
value="Send" class="submitBtn"><strong>Send</strong></button>

<br />

</fieldset>
</form>
</body>

</html>

Open in new window

0
 

Author Comment

by:edski73
ID: 33716684
Hi kadaba,

Thanks, your example works: http://www.lshsecurity.nl/test/test2.html

But if I implent it in the original form it don't:
http://www.lshsecurity.nl/test/test3.html

I checked everything but I can't see what I'm doing wrong, could you please take another look at it?
http://www.lshsecurity.nl/test/test3.html

Thanks,
Edski
0
 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33717441
<input id="anders" class="textfield-anders" name="vraag2e" type="text" /> should be
<input id="anders" class="textfield-anders" name="anders" type="text" />

and

<input id="anders2" class="textfield-anders" name="vraag5e" type="text" /> should be
<input id="anders2" class="textfield-anders" name="anders2" type="text" />

This should do it.

Best,
kadaba
0
 

Author Comment

by:edski73
ID: 33719192
Hi kadaba,

I have changed the code but still no luck, this is really a strange form isn't it?

Thanks,
Edski
0
 

Author Comment

by:edski73
ID: 33719223
Hi kadaba,

I have changed the code here:
http://www.lshsecurity.nl/test/test3.html

Thanks,
Edski
0
 

Author Comment

by:edski73
ID: 33719269
Hi kadaba,

Sorry... I didn't look good it works now, THANKS!!!!

Thanks,
Edski
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Not allowed to load local recource. 4 34
Ahax pagination 9 32
JavaScript Sort Ordering and Choice Limiting 5 21
JQuery Detecting page post back 6 9
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
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 …
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)

839 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