asked on

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

skij

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

arielbf

ASKER

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.

arielbf

ASKER

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?

ASKER CERTIFIED SOLUTION

skij

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

arielbf

ASKER

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).