Jquery validation of radio/checkbox problem

Hi

I'm trying to use the attached form. No problems with the validation of the text field - however for some reason the validation for the radio question (sex) and checkbox (website terms) - is not working. Any ideas?
<!DOCTYPE html>
<html lang="en">
<title>Tipultech</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="content-language" content="en">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://www.tipultech.com/responsive/dist/jquery.validate.js"></script>
<body>

<form action="nextpage.asp?lang=en" class="w3-form" name="form1" id="form1" lang="en">

	<div class="w3-group">      
		<input class="w3-input" name="requsername" id="requsername" type="text">
		<label class="w3-label" for="requsername">Username</label>
	</div>
	
	<fieldset data-role="controlgroup" id="lbl_group">
		<legend>Gender:</legend>
		
		<label class="w3-checkbox">
		  <input type="radio" name="sex" value="1" id="tsex1">
		  <span class="w3-checkmark" for="sex1"></span> Male
		</label><br>
		
		<label class="w3-checkbox">
		  <input type="radio" name="sex" value="2" id="tsex2">
		  <span class="w3-checkmark" for="sex2"></span> Female
		</label>
	</fieldset>
	
	<label class="w3-checkbox">
	  <input type="checkbox" name="websiteterms" id="websiteterms" required>
	  <span class="w3-checkmark" for="websiteterms"></span> I read, understood and agree to the website's terms and conditions
	</label><br>
	
	
		
	<button class="w3-btn w3-deep-orange">Send</button>
</form>

<script type="text/javascript">
	$.validator.addMethod("loginRegex", function(value, element) {
		return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
	}, "Please use alphanumeric characters only");
	
	function hidesubmit(){
		$("#takala").hide();
	}
	setTimeout(hidesubmit, 0);
	
	$(document).ready(function(){
	
		var rules={
			'requsername':{required:true,'minlength':5,'maxlength':20,loginRegex:true},
			'websiteterms':{required:true},
			'sex':{required:true}
			};
				
			$("#form1").validate({
				'rules':rules,
				'messages': {
			        'requsername': {'required':"Required field",'maxlength': $.validator.format("The username should contain up to 20 characters"),'minlength': $.validator.format("The username should have at least 5 characters")}},
					'websiteterms':{'required':"Required field"},
					'sex':{'required':"Required field"},
					errorPlacement: function (error, element) {
						if (element.attr("name") === "sex") {
							error.insertAfter("#lbl_group");
						} else {
							error.insertAfter(element);
						}
					},
					onclick: false //Added this to prevent the default and add my own on-click handler
					})
			
			
	});
</script>
		

</body>
</html>

Open in new window

arielbfAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

skijCommented:
The validation is actually working, however the layout is not intuitive.  If you add this CSS you will see better how it is working:
<style type="text/css">
label.error {
display: block;
margin: 0 0 20px 0;
color: red;
}
label label.error {
display: inline;
}
</style>

Open in new window

 
Like this:
<!DOCTYPE html>
<html lang="en">
<title>Tipultech</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="content-language" content="en">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://www.tipultech.com/responsive/dist/jquery.validate.js"></script>

<style type="text/css">
label.error {
display: block;
margin: 0 0 20px 0;
color: red;
}
label label.error {
display: inline;
}
</style>

<body>

<form action="nextpage.asp?lang=en" class="w3-form" name="form1" id="form1" lang="en">

	<div class="w3-group">      
		<input class="w3-input" name="requsername" id="requsername" type="text">
		<label class="w3-label" for="requsername">Username</label>
	</div>
	
	<fieldset data-role="controlgroup" id="lbl_group">
		<legend>Gender:</legend>
		
		<label class="w3-checkbox">
		  <input type="radio" name="sex" value="1" id="tsex1">
		  <span class="w3-checkmark" for="sex1"></span> Male
		</label><br>
		
		<label class="w3-checkbox">
		  <input type="radio" name="sex" value="2" id="tsex2">
		  <span class="w3-checkmark" for="sex2"></span> Female
		</label>
	</fieldset>
	
	<label class="w3-checkbox">
	  <input type="checkbox" name="websiteterms" id="websiteterms" required>
	  <span class="w3-checkmark" for="websiteterms"></span> I read, understood and agree to the website's terms and conditions
	</label><br>
	
	
		
	<button class="w3-btn w3-deep-orange">Send</button>
</form>

<script type="text/javascript">
	$.validator.addMethod("loginRegex", function(value, element) {
		return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
	}, "Please use alphanumeric characters only");
	
	function hidesubmit(){
		$("#takala").hide();
	}
	setTimeout(hidesubmit, 0);
	
	$(document).ready(function(){
	
		var rules={
			'requsername':{required:true,'minlength':5,'maxlength':20,loginRegex:true},
			'websiteterms':{required:true},
			'sex':{required:true}
			};
				
			$("#form1").validate({
				'rules':rules,
				'messages': {
			        'requsername': {'required':"Required field",'maxlength': $.validator.format("The username should contain up to 20 characters"),'minlength': $.validator.format("The username should have at least 5 characters")}},
					'websiteterms':{'required':"Required field"},
					'sex':{'required':"Required field"},
					errorPlacement: function (error, element) {
						if (element.attr("name") === "sex") {
							error.insertAfter("#lbl_group");
						} else {
							error.insertAfter(element);
						}
					},
					onclick: false //Added this to prevent the default and add my own on-click handler
					})
			
			
	});
</script>
		

</body>
</html>

Open in new window

arielbfAuthor Commented:
I don't understand it. I copy+paste the code from above to a HTML file in my computer, run it - and it still show me the same problem, the same when I've uploaded it to the server. However I can see what your saying - when I pasted the code to an online html editor - It was working correctly.
arielbfAuthor Commented:
Well, I understand why it is not working on my computer and my server as opposed to online editors.
The line:
<link rel="stylesheet" href="w3.css">
is not pointing anywhere....
To see my problem you should set the line to be:
<link rel="stylesheet" href="http://www.tipultech.com/responsive/w3.css">

And now you will see the problem. So somehow the stylesheet is interfering - But I need it.
The here is anyway to work around it?
skijCommented:
The problem is on line 105 of your CSS:
.w3-checkbox input[type="checkbox"], .w3-checkbox input[type="radio"] {
    display: none;
}

Open in new window


The inputs must be displayed for the validation to work.  As a workaround, you could use a combination of "position: absolute;" and "visibility: hidden;" to achieve the desired result.

<style type="text/css">
.w3-checkbox input[type="checkbox"], .w3-checkbox input[type="radio"] {
display: block !important;
position: absolute;
visibility: hidden;
z-index: -1;
}
</style>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
arielbfAuthor Commented:
Great, but now 2 small things remain:
1) With the text validation - the error message disapears when you enter valid response. This is not the case with the checkbox and radio questions. (small problem)
2) When you click on the checkbox after you received the error message - it seems to the user that you can't check the checkbox (bigger problem).
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.