Validating form by handling keyup event

I’ve got Ajax validation working great for forms, but I’d like the validation to kick on not only to handle the “change” event; I’d like the validation to also take place on for, e.g., the “keyup” event.

So in my view, I specify “Jevent” as an html option to, e.g., a textfield. When I did “view source” in my browser, I could see that Yii did indeed set the Jevent property of the text field properly. So far so good. Here’s a snippet of the view:

<div class="row">

   <?php echo $form->labelEx($model,'author'); ?>

   <?php 

       echo $form->textField($model,'author', 

                             array('size'=>60, [b]'Jevent'=>'keyup change'[/b])); 

   ?>

   <?php echo $form->error($model,'author'); ?>

</div>

Amazingly enough, this worked the first time that I used it; but it FAILS on subsequent tries. Specifically, here’s the sequence:

[list=1]

[*]Load the page

[*]Place cursor in the author textbox

[*]Immediately leave the textbox – either by clicking elsewhere, or via TAB button

[*]Validation error shows, as it should

[*]Place cursor again into the author textbox

[*]Type any letter

[*]Validation error disappears–exactly the behavior I want.

[*]Now go on to populate other inputs on the form

[*]Re-enter the author textbox again, and cause the validation to appear, by leaving the field blank.

[*]Re-enter the author textbox one final time, and type in a letter.

This should cause the validation error to disappear, as it did before,

but this second time around, the validation error does not go away.

[/list]

Ideas, anybody? Why would Jquery pay attention to keyup events the first time, but not on subsequent tries?

Thanks!

After it stops working as expected… does the onchange event continues to fire?

Yes.

How is your form rendered? do you use AJAX or normal REQUEST?

If you do a normal request, and instead of implementing validations on every input field when they render, why dont you create an onready function does something like the following (code extracted from jquery.validation plugin):

// final delegate is a function... 

$('#form')

	.delegate("focusin focusout keyup", ":text, :password, :file, select, textarea", delegate)

	.delegate("click", ":radio, :checkbox, select, option", delegate);

My question, why if you having such a great plugin that could suit most (if not all) form validation needs for programmers, you are not using it? Wouldn’t be easier just inserting the plugin to your code and do a call like:

// no options included here, just default validation occurs

 $('#form').validate();

That is up to you, that was a question out of curiosity, please dont take it the wrong way.

I would try to setup your validation at the beginning and let delegate() or live() jquery functions, handle the keyup and change events. If you still having problems, drop the js code here.

Cheers

Thanks; your reply caused me to dig deeper. It turns out that CActiveForm already gives us control over when validation occurs, by configuring clientOptions. In the view, this works:

// 1. Configure clientOptions so that ALL

//    form inputs are validated with each keystroke

$form = $this->beginWidget('CActiveForm', 

   array(

         'id'=>'author-form',

	 'enableAjaxValidation'=>true,

	 'focus'=>array($model, 'author'),

	 'clientOptions'=>array(

		'validateOnChange'=>true,  // the default. validate when input changes

		'validateOnType'=>true,    // validate with EVERY keystroke, hooray!

		'validationDelay'=>10,     // not related to this post--but cool!

                                           // default delay is 200 ms

	),

));


// 2. If you have certain form inputs you do

//    NOT wish to validate with each keystroke,

//    you can override the CActiveForm setting 

//    on a per-input basis.  Example:


<div class="row">

   <?php echo $form->labelEx($model,'city'); ?>

   <?php echo form->passwordField($model,'city'); ?>

   <?php echo $form->error($model, 'city',

               array('validateOnType'=>false));

   ?>

</div>

Glad to hear and thanks for sharing your solution

But of course!

good

• Hello, there. I’ve also tried this option but it doesn’t work. I don’t know why. I’m pretty sure this must be working because Yii already generated this on their release. Please help.