Yii Framework Forum: [EXTENSION] Javascript form Validation - Yii Framework Forum

Jump to content

  • (8 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

[EXTENSION] Javascript form Validation Rate Topic: *---- 1 Votes

#1 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 08 March 2009 - 09:23 AM

Hi
as I needed client-side form validation, I wrote an extension and thought that maybe it could be useful to others.
This extension uses the Validate JQuery plugin and does nothing but turn yii built-in rules into other rules supported by this (excellent) JQuery plugin.

The work to use client-side validation on existing forms is minimal : replace calls to Yii CHtml helpers methods (like activeTextField) with calls to the same method implemented by the extension. Call endForm() at the end, and that's it.

I've not wrapped all CHtml helpers method and not all Yii built-in rules are supported, but that's just a first release and if it is intresting for others, I'll implement what is missing. I strongly encourage you to take a look to the readme file for more info.

Ok, so try it and play with the samples included in the zip... tell me what you think : every feedback is very welcome ;)
ciao
8)

Attached File(s)


0

#2 User is offline   jonah 

  • Advanced Member
  • Yii
  • Group: Yii Dev Team
  • Posts: 733
  • Joined: 27-November 08
  • Location:California (US)

Posted 09 March 2009 - 12:43 AM

Idea: for rules that are not supported, use php/yii to validate it like normal & use ajax to obtain the results and display errors.
0

#3 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 09 March 2009 - 04:24 AM

Hi Jonah,
I had thought about this idea (and that's not difficult to implement with the remote option) however I was really not sure to do it because my understanding of client-side form validation advantages (over server validation) what that it doesn't load the server (by definition ;) ). If you perform ajax validation, then where is the advantage of client validation, it's almost like an actual form submission isn't it ? what do you think ? ...

In fact I think that the best solution would be to support most (if not all) of yii built-in validators.

ciao
8)
0

#4 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,016
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 10 March 2009 - 10:37 AM

Wouldn't it make sense to have this as a behaviour that you can mix in to your validators if required? I just think it's not possible yet with behaviors as they are now...
0

#5 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 11 March 2009 - 04:03 AM

Hi Mike,
I'm not sur to understand how behaviours could be used for client-side form validation... could you please explain ?
8)

0

#6 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,016
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 11 March 2009 - 04:41 AM

They don't help you in doing the clientside validation itself. But they might be a good way to let others easiliy integrate your extension. A behavior brings new functionality (in this case "client side validation") that you can "mix in" to existing components (see here). That's why i thought, they might be apropriate here.

The idea was to have the standard built in validation and add clientside validation globally as behavior to some Validators by configuration if required. But as said above: Not sure if that's possible with the current implementation of behaviors. Maybe Qiang can tell more, if this is really a good idea.
0

#7 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 11 March 2009 - 05:16 AM

Thanks for your clear explanation ... I must say that I'm not used to the behaviour concept (except for AR) and I'll look at it in details.

8)
0

#8 User is offline   Mike 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 3,016
  • Joined: 06-October 08
  • Location:Upper Palatinate

Posted 11 March 2009 - 05:25 AM

I wasn't either until recently ;) - but found it not very hard to understand. I'm still looking for good examples when it would make sense to use a behavior. That's why i thought, your extension might be a candidate. From my understanding they should be ideal to add special functionality to pretty much every thinkable component of the framework.

Problem in your case is though, that for easy configuration the behavior should get added globally to all validator classes instead of validator instances (objects). AFAIK this is not possible (yet...).
0

#9 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 13 March 2009 - 07:20 AM

Hi there !
I plan to add support for the compareAttribute Yii built-in validator (and maybe the match) and probably do so this week-end. Then I'll certainly publish the extension in the Extension section of the Yii website, but I would have liked to know if the first version is all right or if it contains some errors ? ... or maybe if the same kind of feature (javascript form validation) could be better implemented in Yii.... any feedback is very welcome ;)

8)
0

#10 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 14 March 2009 - 10:11 AM

extension created : http://www.yiiframew.../jformvalidate/
Add support for the compare yii validator.
8)




0

#11 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 19 March 2009 - 10:59 AM

extension updated : http://www.yiiframew.../jformvalidate/
version 1.0.2
  • add support for the numerical yii built-in validator
  • fix some bugs

(see changelog for details)
enjoy ;)

8)
0

#12 User is offline   jonah 

  • Advanced Member
  • Yii
  • Group: Yii Dev Team
  • Posts: 733
  • Joined: 27-November 08
  • Location:California (US)

Posted 19 March 2009 - 02:34 PM

does it take scenarios into account?
0

#13 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 19 March 2009 - 04:29 PM

hi Jonah,
yes it does take scenario into account ... (previous version did already). What happen is that just after the call to form() you can call setScenario(scenationName) so the extension will only select validators which are part of this scenario.
For instance :

<?php	
$CS=Yii::app()->jformvalidate;
echo $CS->form();

$CS->setScenario("form7"); // set scenario name here
?>
<?php echo CHtml::errorSummary($model);?>
<div class="container errorSummary" style="display:none">
<p>Please fix the following input errors:</p>
<ul>
</ul>
</div>
<div class="simple">
<?php echo CHtml::activeLabel($model,'email'); ?>
<?php echo $CS->activeTextField($model,'email') ?>
</div>

<div class="action">
<?php echo CHtml::submitButton('Submit'); ?>
</div>

<?php echo $CS->endForm(); ?>
</form>


Actually the archive comes with a sample (controller+model+view) that are using scenario based validation (take a look at the TestForm Model class.
However, I've realized it is missing some rule that is common to all yii built-in validator : allowEmpty (shame on me  :-[ )  This will be implemented in a future release ...
8)



0

#14 User is offline   SlowDown 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 27
  • Joined: 18-March 09

Posted 20 March 2009 - 04:27 AM

Hi,
I'm trying this extension and configure it exactly the same as in README, however it threw following exception when try to run sample :

JSVFormController cannot find the requested view "nav-bar".

#0 /public_html/domain1.com/public/test/protected/controllers/JSVFormController.php(47): CController->renderPartial('nav-bar', NULL, true)
#1 /public_html/domain1.com/public/yii/framework/web/actions/CInlineAction.php(32): JSVFormController->actionTestForm()
#2 /public_html/domain1.com/public/yii/framework/web/CController.php(265): CInlineAction->run()
#3 /public_html/domain1.com/public/yii/framework/web/CController.php(243): CController->runAction(Object(CInlineAction))
#4 /public_html/domain1.com/public/yii/framework/web/CController.php(225): CController->runActionWithFilters(Object(CInlineAction), Array)
#5 /public_html/domain1.com/public/yii/framework/web/CWebApplication.php(335): CController->run('TestForm')
#6 /public/yii/framework/web/CWebApplication.php(123): CWebApplication->runController('JSVForm/TestFor...')
#7 /public_html/domain1.com/public/yii/framework/base/CApplication.php(170): CWebApplication->processRequest()
#8 /public_html/domain1.com/public/test/index.php(11): CApplication->run()
#9 {main}

Strangely, it run Ok for the QuickStart part ie. Contact.php modification.

any idea ?

-majin-
0

#15 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 20 March 2009 - 01:33 PM

Hi majin,
can you check that your folder protected/views/jsvform contains file nav-bar.php ?
This file is a view that contains a small menu so you can navigate among form samples.

8)
0

#16 User is offline   SlowDown 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 27
  • Joined: 18-March 09

Posted 20 March 2009 - 08:11 PM

Hi Raul,
Yes, it is there :

$ ls test/protected/views/jsvform/
index.php    testForm1.php  testForm3.php  testForm5.php  testForm7.php
nav-bar.php  testForm2.php  testForm4.php  testForm6.php  testForm8.php

-majin-

0

#17 User is offline   SlowDown 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 27
  • Joined: 18-March 09

Posted 20 March 2009 - 08:42 PM

@Raul: Pls give some advice on how to use this extension to make optional input field as in Billing address in this demo :

http://jquery.bassis...rketo/step2.htm

thanks.

-majin-
0

#18 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 21 March 2009 - 05:13 AM

Hi Majin,
I'll release today  a new version to handle correctly optionnal fields. Regarding this nav-bar.php file-not-found I have no idea why Yii does'nt find it ... I'll get back to you later (hopefully with a solution ;)
bye
8)


0

#19 User is offline   Raoul 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 647
  • Joined: 29-November 08
  • Location:Paris, France

Posted 21 March 2009 - 07:13 AM


extension updated : http://www.yiiframew.../jformvalidate/
version 1.0.3
- add support for allowEmpty  yii built-in validator attribute
- rename to lowercase
(see changelog for details)

@Majin : here is a new release that should suit your needs, as it now handles correctly, optional fields. Regarding the nav-bar not found issue, I think this maybe related to some lower/upper-case problems. My platform is Windows, and file/folder names are case insensitive. You're using unix ;). So, in this release I've renames sample files and folders so it should be ok ... I was not able to test it (I have no unix-like os available) so don't hesitate to let me know if the problem persist.... and same thing if you encounter other problems...
bye
8)


0

#20 User is offline   SlowDown 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 27
  • Joined: 18-March 09

Posted 21 March 2009 - 09:31 AM

@Raul: yes I think it was case sensitive issue, now first sample screen coming out. But still when I click on each test form I got page not found error :

Unable to resolve the request "JSVForm/TestForm".

seems like url for each test form not yet fixed :

http://domain1.com/t...m/TestForm&id=1

As for optional field, could you please show me how to modify following code :

http://www.yiiframew...pic,1191.0.html

Thanks in advance.

-majin-
0

Share this topic:


  • (8 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users