	[x] Posted via EE Mobile
	Search, ask, and monitor your questions on the go with EE Mobile. Visit Experts Exchange from your mobile device and never be out of touch again.

10/28/2009 at 03:11PM PDT, ID: 24852901

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

8.2

Mootools: Require a radio to be selected

Asked by hankknight in JavaScript, JavaScript Frameworks

I want the radio options to be required, so that if a person does not select at least one radio option there should be an alert and the form should not be submitted.

View the Solution FREE for 30 Days

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:

           
           
             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" > 
<head> 
 
 
<script type="text/javascript" src="http://fds2432.googlepages.com/moo.js"></script> 
 
<script type="text/javascript"> 
 
var errorCount = 0;
var JFormValidator = new Class({
	initialize: function()
	{
		// Initialize variables
		this.handlers	= Object();
		this.custom		= Object();
 
		// Default handlers
		this.setHandler('username',
			function (value) {
				regex = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&]", "i");
				return !regex.test(value);
			}
		);
 
		this.setHandler('password',
			function (value) {
				regex=/^\S[\S ]{2,98}\S$/;
				return regex.test(value);
			}
		);
 
		this.setHandler('numeric',
			function (value) {
				regex=/^(\d|-)?(\d|,)*\.?\d*$/;
				return regex.test(value);
			}
		);
 
		this.setHandler('email',
			function (value) {
				regex=/^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
				return regex.test(value);
			}
		);
 
		// Attach to forms with class 'form-validate'
		var forms = $$('form.form-validate');
		forms.each(function(form){ this.attachToForm(form); }, this);
	},
 
	setHandler: function(name, fn, en)
	{
		en = (en == '') ? true : en;
		this.handlers[name] = { enabled: en, exec: fn };
	},
 
	attachToForm: function(form)
	{
		// Iterate through the form object and attach the validate method to all input fields.
		$A(form.elements).each(function(el){
			el = $(el);
			if ((el.getTag() == 'input' || el.getTag() == 'button') && el.getProperty('type') == 'submit') {
				if (el.hasClass('validate')) {
					el.onclick = function(){errorCount=0;return document.formvalidator.isValid(this.form);};
				}
			} else {
				el.addEvent('blur', function(){return document.formvalidator.validate(this);});
			}
		});
	},
 
 
 
	validate: function(el)
	{
		// If the field is required make sure it has a value
		if ($(el).hasClass('required')) {
			if (!($(el).getValue())) {
				this.handleResponse(false, el);
				if(errorCount==0 && $(el).value=='' ) {
				  alert('You must complete all required fields!');
				  $(el).style.background="#efdddd";
				  errorCount=1;
				  return false;}
				else {$(el).style.background="#efdddd"; }
			}
		else {	$(el).style.background="#ffffff";}
		}
 
		// Only validate the field if the validate class is set
		var handler = (el.className && el.className.search(/validate-([a-zA-Z0-9\_\-]+)/) != -1) ? el.className.match(/validate-([a-zA-Z0-9\_\-]+)/)[1] : "";
		if (handler == '') {
			this.handleResponse(true, el);
			return true;
		}
 
		// Check the additional validation types
		if ((handler) && (handler != 'none') && (this.handlers[handler]) && $(el).getValue()) {
			// Execute the validation handler and return result
			if (this.handlers[handler].exec($(el).getValue()) != true) {
				this.handleResponse(false, el);
				$(el).style.background="#efdddd";
				alert('You must provide a valid email adddress.');
				return false;
			}
else {	$(el).style.background="#ffffff";}
 
		}
 
		// Return validation state
		this.handleResponse(true, el);
		return true;
	},
 
	isValid: function(form)
	{
		var valid = true;
 
		// Validate form fields
		for (var i=0;i < form.elements.length; i++) {
			if (this.validate(form.elements[i]) == false) {
				valid = false;
			}
		}
 
		// Run custom form validators if present
		$A(this.custom).each(function(validator){
			if (validator.exec() != true) {
				valid = false;
			}
		});
 
		return valid;
	},
 
	handleResponse: function(state, el)
	{
		// Find the label object for the given field if it exists
		if (!(el.labelref)) {
			var labels = $$('label');
			labels.each(function(label){
				if (label.getProperty('for') == el.getProperty('id')) {
					el.labelref = label;
				}
			});
		}
 
		// Set the element and its label (if exists) invalid state
		if (state == false) {
			el.addClass('invalid');
			if (el.labelref) {
				$(el.labelref).addClass('invalid');
			}
		} else {
			el.removeClass('invalid');
			if (el.labelref) {
				$(el.labelref).removeClass('invalid');
			}
		}
	}
});
 
document.formvalidator = null;
Window.onDomReady(function(){
	document.formvalidator = new JFormValidator();
});
 
 
 
 
		function validateForm( frm ) {
			var valid = document.formvalidator.isValid(frm);
			if (valid == false) {
				// do field validation
				if (frm.email.invalid) {
					alert( "Please enter a valid e-mail address:" );
				} else if (frm.text.invalid) {
					alert( "Please make sure the form is complete and valid." );
				}
				return false;
			} else {
				frm.submit();
			}
		}
 
</script> 
 
 
<body> 
 
 
<form action="./" method="post" name="emailForm" id="emailForm" class="form-validate">
 
 
Please select one (Required)<br />
<input type="radio" name="zzz" value="1"/>  1<br /> 
<input type="radio" name="zzz" value="2"/>  2<br /> 
<input type="radio" name="zzz" value="3"/>  3</div> 
<br /><br />
Please select one (Required)<br />
<input type="radio" name="contact_subject" id="contact_subject" value="Site is available only"/>  Site is available only				<br /> 
<input type="radio" name="contact_subject" id="contact_subject" value="Site is available and conduct a transaction (for example login)"/>  Site is available and conduct a transaction (for example login)				<br /> 
<input type="radio" name="contact_subject" id="contact_subject" value="Other"/>  Other			</div> 
 
<br /><br />
Telephone (Required) <input type="text" name="telephone" id="contact_name" size="20" class="inputbox required" value="" /> <br />
Email <input type="text" id="contact_email" name="email" size="20" value="" class="inputbox required validate-email" maxlength="100" /> <br />
<input type="submit" class="button validate" value="Send" /><br />
</form> 
 
</body>
</html>

           
         

Keywords: Mootools: Require a radio to be selected

	Title
1	Javascript - input text with radio button
2	Form () Radio button submit
3	Check if Radio button is checked, Sho…
4	ASP Vbscript form have alert come up …
5	Radio Button -- Help!!!
6	Validating multiple radio button sets

Loading Advertisement...

20091111-EE-VQP-91 - Hierarchy / EE_QW_EXPERT_20070906

1. sh0e32,950
2. hielo32,300
3. anoyes19,164
4. mplungjan16,330
5. wilq3212,230
6. AlbertVan...8,668
7. HonorGod8,150
8. Kravimir7,000
8. azadisaryev7,000
10. gokce_y...6,000
11. exalkonium5,600
12. logudotcom5,200
13. abel5,000
13. objects5,000
13. amit_g5,000
16. Tomarse...4,000
16. Roonaan4,000
16. limweizhong4,000
16. HainKurt4,000
16. agdub4,000
16. christoph...4,000
16. heimidal4,000
23. DanRollins3,500
23. jagadeesh...3,500
25. ziffgone3,000
25. pratima_...3,000
25. Seo_Exp...3,000
25. prokvk3,000

1. hielo71,050
2. sh0e70,850
3. mplungjan32,180
4. anoyes20,664
5. AlbertVan...12,668
6. wilq3212,230
7. ziffgone10,500
8. Kravimir10,000
9. MMDevelo...8,875
10. b0lsc0tt8,500
11. HonorGod8,150
12. azadisaryev7,500
13. Tomarse...7,000
14. objects6,000
14. gokce_y...6,000
16. exalkonium5,600
17. logudotcom5,200
17. pratima_...5,200
19. abel5,000
19. amit_g5,000
21. cem_turk4,000
21. Roonaan4,000
21. limweizhong4,000
21. ozan864,000
21. kayahr4,000
21. HainKurt4,000
21. agdub4,000
21. christoph...4,000
21. heimidal4,000

Mootools: Require a radio to be selected

Asked by hankknight in JavaScript, JavaScript Frameworks

About this solution