Client-side form validation - Revision history

Robbiej: Added deprecation notice and link to Joomla Manual

2024-07-04T10:09:07Z

Added deprecation notice and link to Joomla Manual

← Older revision		Revision as of 10:09, 4 July 2024
Line 1:		Line 1:
	{{~~JSplit~~}}		{{Warning\|This page has been superseded and is no longer maintained. Please go to [http://pr-240.manual.joomlacode.org/docs/general-concepts/forms/client-side-validation Joomla Manual Client-side Validation] instead}}

	==Introduction==		==Introduction==

Tonypartridge: JUtility GetToken was deprecated.

2017-11-02T14:06:42Z

JUtility GetToken was deprecated.

← Older revision		Revision as of 14:06, 2 November 2017
Line 138:		Line 138:
	var f = document.adminForm;		var f = document.adminForm;
	if (document.formvalidator.isValid(f)) {		if (document.formvalidator.isValid(f)) {
	f.check.value='<?php echo ~~JUtility~~::~~getToken~~(); ?>'; //send token		f.check.value='<?php echo JSession::getFormToken(); ?>'; //send token
	submitform(pressbutton);		submitform(pressbutton);
	}		}

Tonypartridge: Added information about lists

2017-01-03T06:05:43Z

Added information about lists

@@ Line 35: / Line 35: @@
   <option value="This" class="required">This</option>
   <option value="That" class="required">That</option>
 </field>
 </source>

Rolandd: Correct classname

2016-01-04T20:28:02Z

Correct classname

← Older revision		Revision as of 20:28, 4 January 2016
Line 10:		Line 10:
	Add a behavior to your form view template. For Joomla versions before 1.5.2:		Add a behavior to your form view template. For Joomla versions before 1.5.2:
	<source lang="php">		<source lang="php">
	~~JHTMLBehavior~~::formvalidation();		JHtmlBehavior::formvalidation();
	</source>		</source>
	For versions from 1.5.2 to 3.3.6:		For versions from 1.5.2 to 3.3.6:
	<source lang="php">		<source lang="php">
	~~JHTML~~::_('behavior.formvalidation');		JHtml::_('behavior.formvalidation');
	</source>		</source>
	For versions from 3.4:		For versions from 3.4:
	<source lang="php">		<source lang="php">
	~~JHTML~~::_('behavior.formvalidator');		JHtml::_('behavior.formvalidator');
	</source>		</source>

Dgt41 at 02:43, 11 March 2015

2015-03-11T02:43:42Z

← Older revision		Revision as of 02:43, 11 March 2015
Line 92:		Line 92:
	jQuery(document).ready(function(){		jQuery(document).ready(function(){
	document.formvalidator.setHandler('passverify', function (value) {		document.formvalidator.setHandler('passverify', function (value) {
	return (jQuery('~~#password2~~').value == value);		return (jQuery('input[type=password]').value == value);
	});		});
	});		});

Dgt41: /* Custom Handlers */

2015-03-11T02:36:39Z

Custom Handlers

← Older revision		Revision as of 02:36, 11 March 2015
Line 56:		Line 56:

	If you want a custom handler, you can add one to the class, as in the following example (to be defined AFTER loading validate.js):		If you want a custom handler, you can add one to the class, as in the following example (to be defined AFTER loading validate.js):

	MooTools		MooTools
	<source lang="javascript">		<source lang="javascript">
Line 77:		Line 78:

	If you want a custom handler to check both the passwords (Password and Confirm Password) are same, please add the following script after the validate.js:		If you want a custom handler to check both the passwords (Password and Confirm Password) are same, please add the following script after the validate.js:

	MooTools		MooTools
	<source lang="javascript">		<source lang="javascript">
Line 85:		Line 87:
	});		});
	</source>		</source>

	jQuery		jQuery
	<source lang="javascript">		<source lang="javascript">

Dgt41 at 02:35, 11 March 2015

2015-03-11T02:35:01Z

← Older revision		Revision as of 02:35, 11 March 2015
Line 2:		Line 2:
	==Introduction==		==Introduction==

	Joomla 1.5 and later versions contain a behavior, which allows your form and its elements to be validated at client side, i.e., before it is submitted to the server. The behavior enables the script '''validate.js''' and ~~uses~~ [http://mootools.net MooTools].		Joomla 1.5 and later versions contain a behavior, which allows your form and its elements to be validated at client side, i.e., before it is submitted to the server. The behavior enables the script '''validate.js''' and used [http://mootools.net MooTools] up to version 3.2 and jQuery from version 3.3.

	Note: Validate.js is a validation system different from the one provided by [http://mootools.net/docs/more/Forms/Form.Validator MooTools].		Note: Validate.js is a validation system different from the one provided by [http://mootools.net/docs/more/Forms/Form.Validator MooTools].
Line 12:		Line 12:
	JHTMLBehavior::formvalidation();		JHTMLBehavior::formvalidation();
	</source>		</source>
	For versions from 1.5.2:		For versions from 1.5.2 to 3.3.6:
	<source lang="php">		<source lang="php">
	JHTML::_('behavior.formvalidation');		JHTML::_('behavior.formvalidation');
			</source>
			For versions from 3.4:
			<source lang="php">
			JHTML::_('behavior.formvalidator');
	</source>		</source>

Line 52:		Line 56:

	If you want a custom handler, you can add one to the class, as in the following example (to be defined AFTER loading validate.js):		If you want a custom handler, you can add one to the class, as in the following example (to be defined AFTER loading validate.js):
			MooTools
	<source lang="javascript">		<source lang="javascript">
	window.addEvent('domready', function(){		window.addEvent('domready', function(){
			document.formvalidator.setHandler('birth', function(value) {
			regex=/^\d{4}-\d{2}-\d{2}$/;
			return regex.test(value);
			});
			});
			</source>
			jQuery
			<source lang="javascript">
			jQuery(document).ready(function(){
	document.formvalidator.setHandler('birth', function(value) {		document.formvalidator.setHandler('birth', function(value) {
	regex=/^\d{4}-\d{2}-\d{2}$/;		regex=/^\d{4}-\d{2}-\d{2}$/;
Line 63:		Line 77:

	If you want a custom handler to check both the passwords (Password and Confirm Password) are same, please add the following script after the validate.js:		If you want a custom handler to check both the passwords (Password and Confirm Password) are same, please add the following script after the validate.js:
			MooTools
	<source lang="javascript">		<source lang="javascript">
	window.addEvent('domready', function(){		window.addEvent('domready', function(){
	document.formvalidator.setHandler('passverify', function (value) {		document.formvalidator.setHandler('passverify', function (value) {
	return ($('password').value == value);		return ($('password').value == value);
			});
			});
			</source>
			jQuery
			<source lang="javascript">
			jQuery(document).ready(function(){
			document.formvalidator.setHandler('passverify', function (value) {
			return (jQuery('#password2').value == value);
	});		});
	});		});

Tom Hutchison: JSplit template

2013-05-28T01:39:10Z

JSplit template

← Older revision		Revision as of 01:39, 28 May 2013
Line 1:		Line 1:
			{{JSplit}}
	==Introduction==		==Introduction==

E-builds: Adding link to difference client and server

2013-02-01T15:40:29Z

Adding link to difference client and server

← Older revision		Revision as of 15:40, 1 February 2013
Line 122:		Line 122:
	==More on mootools validation==		==More on mootools validation==
	More available classes on the mootools site here: [http://mootools.net/docs/more/Forms/Form.Validator#Validators http://mootools.net/docs/more/Forms/Form.Validator#Validators]		More available classes on the mootools site here: [http://mootools.net/docs/more/Forms/Form.Validator#Validators http://mootools.net/docs/more/Forms/Form.Validator#Validators]


			==Server- or Client-side validation?==
			[[Form validation]]

	<noinclude>[[Category:Tutorials]][[Category:Development]][[Category:Component Development]]</noinclude>		<noinclude>[[Category:Tutorials]][[Category:Development]][[Category:Component Development]]</noinclude>

E-builds: Adding mootools validation link and radio remark from similiar page to be deleted:

2013-02-01T15:35:18Z

Adding mootools validation link and radio remark from similiar page to be deleted:

← Older revision		Revision as of 15:35, 1 February 2013
Line 23:		Line 23:
	Add a validation class to your form field declarations. Joomla adds a ''blur'' handler to validate the form field when the user moves away from the field.		Add a validation class to your form field declarations. Joomla adds a ''blur'' handler to validate the form field when the user moves away from the field.
	<source lang="xml">		<source lang="xml">
	<field name="email" type="text"		<field name="email" type="text" class="required validate-email" size="30" />
	class="required validate-email"
	size="30" />		//For radios make sure the class is applied to the options:

			<field name="ThisorThat" type="radio" label="Please say if it was full-time or the part-time equivalent?" >
			<option value="This" class="required">This</option>
			<option value="That" class="required">That</option>
			</field>
	</source>		</source>

Line 68:		Line 73:
	</source>		</source>

	==~~Style~~ Invalid Elements==		==Styling/Templating Invalid Elements==

	Joomla assigns the ''invalid'' class to form fields that do not pass the validation test. ''invalid'' is also added to the field labels.		Joomla assigns the ''invalid'' class to form fields that do not pass the validation test. ''invalid'' is also added to the field labels.
Line 85:		Line 90:


	==~~Work Around when Using~~ with JToolBar==		==Problem & workaround with JToolBar==
	If you are using JHTML::_('behavior.formvalidation') with JToolBar, for example use in backend, the above method will not work. This is because it depends on onSubmit event which did not fire when we call form.submit via JavaScript. To work around this, we have to move the code in onSubmit to be in submitbutton function override. This will look like this:-		If you are using JHTML::_('behavior.formvalidation') with JToolBar, for example use in backend, the above method will not work. This is because it depends on onSubmit event which did not fire when we call form.submit via JavaScript. To work around this, we have to move the code in onSubmit to be in submitbutton function override. This will look like this:-
	<source lang="javascript">		<source lang="javascript">
Line 114:		Line 119:
	</script>		</script>
	</source>		</source>

			==More on mootools validation==
			More available classes on the mootools site here: [http://mootools.net/docs/more/Forms/Form.Validator#Validators http://mootools.net/docs/more/Forms/Form.Validator#Validators]

	<noinclude>[[Category:Tutorials]][[Category:Development]][[Category:Component Development]]</noinclude>		<noinclude>[[Category:Tutorials]][[Category:Development]][[Category:Component Development]]</noinclude>