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

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
edski73Asked:
Who is Participating?
 
kadabaConnect With a Mentor Commented:
<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
 
DalHorinekCommented:
Maybe something like this might work

rules: {
  ...
   vraag2e: function(element) {
       return ( $("#e2:checked") && !$(element).is(":empty") );
   }
}
0
 
kadabaCommented:
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
Hi gurvinder372,

Sorry I had a htaccess inside I have removed it.

Thanks,
Edski
0
 
Gurvinder Pal SinghCommented:
line number 282 should be

<input id="anders" class="textfield-anders" name="vraag2e" type="text" disabled/>
0
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
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
 
edski73Author Commented:
Hi gurvinder372,

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

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

Thanks,
Edski
0
 
Gurvinder Pal SinghCommented:
Yes, i noticed. Gimme some time.
0
 
edski73Author Commented:
Ok, thanks for your help!

Edski
0
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
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
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
Hi gurvinder372,

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

Thanks,
Edski
0
 
Gurvinder Pal SinghCommented:
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
 
edski73Author Commented:
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
 
kadabaCommented:
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
 
edski73Author Commented:
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
 
edski73Author Commented:
Hi kadaba,

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

Thanks,
Edski
0
 
edski73Author Commented:
Hi kadaba,

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

Thanks,
Edski
0
 
edski73Author Commented:
Hi kadaba,

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

Thanks,
Edski
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.