New Symfony Helper for jQuery’s excellent form validation plugin

I updated my old Symfony helper (see http://jnotes.jonasfischer.net/2010/03/smyfony-helper-for-jquerys-excellen-form-validation-plugin/) for the jQuery plugin “jquery.validate” (see http://docs.jquery.com/Plugins/Validation). It now supports embedded forms and is much simpler to use:

Usage

Simply insert the following code directly after the opening <form>-Tag:

< ?php $formId = 'myFormId' ?>
<form id="<?php echo $formId ?>">
< ?php
use_helper('jQueryValidator');
echo jquery_validate_form($form, $formId);
?>

This will add some css classes to the form widgets based on the validators configured in your form.

Then you can add more complex validation afterwards:

<script>
//Certificate name field is only required if a certificate is requested
$('#rdr_donation_cert_name').rules('add', {
  required: '#rdr_donation_certificate_1:checked'
});
</script>

In some cases you might want to access the jQuery-validate object itself:

<script>
 if (typeof < ?php echo $form->getName() ?>Validator !== 'undefined') {
  var donationCertificateValidator = < ?php echo $form->getName() ?>Validator; //jQuery.validate validator (instantiated in jquery_validate_form() helper)
  donationCertificateValidator.element($('#rdr_donation_cert_name'));
}
</script>

Source Code

jQueryValidatorHelper.php:

< ?php
/**
 * Enable the jQuery.validate plugin validation for the given {@param $form}
 *
 * @param sfForm $form [the sfForm object]
 * @param String $formId [the DOM Id of the rendered form]
 * @param String  $jQueryValidatePlugin [the script name of the jquery.validate plugin]
 */
function jquery_validate_form(sfForm $form, $formId, $jQueryValidatePlugin = 'jquery/plugins/validate/jquery.validate.js') {
  sfContext::getInstance()->getConfiguration()->loadHelpers(array('Asset', 'JavascriptBase'));

  if ($jQueryValidatePlugin) {
		use_javascript($jQueryValidatePlugin);
  }

  _jquery_validate_form_extend_form_fields($form->getValidatorSchema()->getFields(), $form->getWidgetSchema()->getFields());
  return javascript_tag("var {$form->getName()}Validator = jQuery('#$formId').validate();");
}

/**
 * Internal helper-helper that adds css and title meta information to the form fields.
 * This information is used by jQuery.validate to build up the validation rules and error messages
 *
 * @param array $validators
 * @param array $widgets
 */
function _jquery_validate_form_extend_form_fields(array $validators, array $widgets)
{
  foreach ($validators as $fieldName => $validator) {
  	$widget = $widgets[$fieldName];
  	if ($validator instanceof sfValidatorSchema || $validator instanceof sfWidgetFormSchemaDecorator) {
  		_jquery_validate_form_extend_form_fields($validator->getFields(), $widget->getFields());
  	}
  	else {
  		$options = $validator->getOptions();
  		$messages = $validator->getMessages();
  		$class = $widget->getAttribute('class');
  		$title = $widget->getAttribute('title');
  		if ($options['required']) {
  			$class .= ' required';
  			$title .= $messages['required'];
  		}

  		switch (get_class($validator)) {
  			case 'sfValidatorEmail':
  			  $class .= ' email';
  			  break;
  		}

  		$widget->setAttribute('class', $class);
  		$widget->setAttribute('title', $title);

  	}
  }

}

Leave a Reply