Solved

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

Posted on 2010-09-19
26
459 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
Comment Utility
Maybe something like this might work

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

Expert Comment

by:kadaba
Comment Utility
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
Comment Utility
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
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Hi gurvinder372,

Sorry I had a htaccess inside I have removed it.

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
line number 282 should be

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

Author Comment

by:edski73
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Yes, i noticed. Gimme some time.
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Comment

by:edski73
Comment Utility
Ok, thanks for your help!

Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Hi gurvinder372,

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

Thanks,
Edski
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
<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
Comment Utility
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
Comment Utility
Hi kadaba,

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

Thanks,
Edski
0
 

Author Comment

by:edski73
Comment Utility
Hi kadaba,

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

Thanks,
Edski
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

762 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

8 Experts available now in Live!

Get 1:1 Help Now