thanks for the screencast. I believe that this may be just what I’m looking for on a current project.

When a validation error message is produced you are already in the next input field as this is triggered on blur and tabbing back to correct this then displays a second validation error message for the field you are leaving to go back and correct the original error, if for example, input is required.

My question is, how do we get the cursor to stay in the first input if a validation error is produced, and maybe change the background colour of the input?

PS: I can only see 3 of the 54 comments below – is there a way to display all of these?

The requested URL /index/validateform was not found on this server.

dont know where to look for help…

Does anyone have a solution for the file field?

It always returns the max file size error and it seems to just post the file name and not the file, which is fine, but it would be nice to have some file auto detection and then ignore them.

I know a few replied with isPartialValid but I’m unsure where and when to impliment them. Atm this is my entire partial I use for forms now:

headScript()->captureStart(); ?>

$(function() {

$(‘.zend_form input, .zend_form textarea’).blur(function() {
var formElementId = ($(this).parent().prev().find(‘label’).attr(‘for’));
doValidation(formElementId);
});
});

function doValidation(id) {

var url = ‘//json/validateform/form_name/form); ?>’;
var data = {};

$(‘.zend_form input, .zend_form textarea’).each(function() {
data[$(this).attr('name')] = $(this).val();
});

$.post(url, data, function(resp) {
$(‘#’+id).parent().find(‘.errors’).remove();
$(‘#’+id).parent().append(getErrorHtml(resp[id], id));
}, ‘json’);

};

function getErrorHtml(formErrors, id) {

var o = ”;
if (formErrors != null) {
var o = ”;

for (errorKey in formErrors) {
o += ”+formErrors[errorKey]+”;
}
o += ”;
}
return o;
}

headScript()->captureEnd(); ?>

form) && $this->form->getErrorMessages()) {
echo $this->partial(‘partials/errors.phtml’, array(‘errors’ => $this->form->getErrorMessages(), ‘translate’ => $this->translate));
}
?>

errorMsg)) { ?>
errorMsg; ?>

form; ?>

And my json Controller is:

_getParam(‘form_name’);
$f = new $form_name();
$data = $this->_getAllParams();

$f->isValid($this->_getAllParams());
$f->isValidPartial($this->_getAllParams());
$json = $f->getMessages();
$this->_helper->json($json);
}

public function isValidPartial(array $data) {
unset($data['image_']);
unset($data['csrf']);
parent::isValidPartial($data);
}

}

first of all – great cast (as always:). I have found out, that this way of ajax validation works wrong, when the input element is filled by jquery`s datepicker and is set to required.

It seems the problem is that the “blur” event is fired when the datepicker window appears (because at that time thi input looses focus) – so ajax grabs its value value to early (it is empty). And the result is the validation error (Zend_Validate_NotEmpty::IS_EMPTYNOT_EMPTY).

Do you have any suggestions? Thanks

I got my code working with those element types by using isValidPartial instead of isValid in my validate Action and by overriding isValidPartial in my form to unset any data related to captcha and csrf

public function isValidPartial(array $data)
{
unset($data['captcha']);
unset($data['csrf']);

parent::isValidPartial($data);
}

Best reagards!

I have some problem with form element “autocoplete” and validate this form when i put youre script.

u have some idea why?

greate tutorial..

cheers m8

Thanks

In jquery code of index.phtml you could use

var data = jQuery(this).serialize();

The validator always returns fileUploadErrorIniSize error.

Maybe anyone experienced the same or has a solution

+1 for more jquery vids. ?

r.e. #1: something in ZendX is not inside the Zend libraries and so I’m reluctant to produce videos about it quite yet, although I know there’s a huge demand out there for jQuery / Zend interaction and the ZendX_JQuery component is great.

#2 people can still use this app if they don’t have js (the javascript code would just be ignored). Sending the post data to indexAction is a moot point that speaks more to where we put our JSON interface in our application. By making a Zend_Form object, we are explicitly decoupling the form object from the action in question. By moving the validation code back into indexAction, we’re re-introducing this coupling. I would rather treat the object separate from the controller, because it is separate from the controller. If you’re writing a 1-to-1 relationship between forms and controller actions, then I would agree with combining the two.

good point!

Thanks for the video. In jQuery you can serialize a form like

var formdata = $(“#formid”).serialize();

Thanks!

Just one suggestion when working with ajax, why not taking advantage of the ContexSwitch action helper?

http://api.jquery.com/serialize/

But I have several concerns about the php implementation:

1) Why don’t you use the ZendX_JQuery component? It has a view helper which enables jQuery with a specified version from Google’s CDN completely automatically. You’re able to do such:

jQuery()->enable()->addOnload(‘javascript here’)?>
or
jQuery->setVersion(’1.4′)->enable() ?>
etc

When you use addOnload() the script is encapsulated inside a $(document).ready(function(){
});

It performs much better than waiting your javascript to complete.

2) JSON responses should only respond to XHR so people with no js can still use your application. Therefore I should suggest using the context switch action helper which will be initialized when you send a XmlHttpRequest with a format parameter requesting a JSON response.

Now you have a special action inside the controller responding only for this validation. I’d suggest you send the POST data to the indexAction. Inside the action you can always distinguish the JSON validation request and use a seperate method to handle the request. Eg a _valdiateJSON($data){} which is called by the indexAction().

thanks for mentioning this. You’re both quite right that this would cut down the number of lines of code! It’s a bad habit from when the view helper didn’t exist.

Just one question why didn’t you use for example:

$this->_helper->json->sendJson($data);

to send JSON and disable layout?

One simple optimization suggested:

- $this->_helper->viewRenderer->setNoRender();
- header(‘Content-type: application/json’);
- echo Zend_Json::encode($json);

// disable view renderer, modifies header and Json it!
+ $this->_helper->json($json);

By the way, I too would like to hear something about Zend_Dojo_Form.

Cheers!

John, Many developers don’t use plain html forms any more, instead use an Ajax framework like ExtJS that generates fields with javascript.

In that case, do you recommend using just Zend_Filter_Input ?

Thanks.