[EXTENSION] Javascript form Validation

Yii 1.1 Extensions
7

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)

8

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…).

9

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)

10

extension created : http://www.yiiframew…/jformvalidate/

Add support for the compare yii validator.

8)

11

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)

12

does it take scenarios into account?

13

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)

14

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-

15

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)

16

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-

17

@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-

18

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)

19

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)

20

@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-

21

oups … mistake ! …

in navbar.php, replace :

[<?php 	echo CHtml::link( 'form 1',array('JSVForm/TestForm','id'=>1) ); ?>]&nbsp;

with

[<?php 	echo CHtml::link( 'form 1',array('Jsvform/TestForm','id'=>1) ); ?>]&nbsp;

this should work ok.

Now for the code modification, this is simple. Assuming that you have correctly declared the jformvalidate extension in your protected/config/main.php file, here is how your view should look like :

<?php	


	$JVF=Yii::app()->jformvalidate;   // name of the component (config/main.php)


	echo $JVF->form(); 	


        // options below should be modified to fit your layout requirements


	$JVF->setOptions(array(


		'errorContainer'=> "div.container",


		'wrapper' => 'li',


		'errorLabelContainer' => "div.container ul",


		'errorClass' => "invalid",


		'onkeyup' => false,


		'onfocusout' =>  false


	));


?>





<?php echo CHtml::errorSummary($test); ?>





<div class="simple">


<?php echo CHtml::activeLabelEx($test,'dob'); ?>


<?php echo $JVF->activeTextField($test,'dob'); ?>


</div>


<div class="simple">


<?php echo CHtml::activeLabelEx($test,'married'); ?>


<?php echo $JVF->activeCheckBox($test,'married'); ?>


</div>


<div class="simple">


<?php echo CHtml::activeLabelEx($test,'kids'); ?>


<?php echo $JVF->activeTextField($test,'kids'); ?>


</div>





<?php  echo $JVF->endForm(); ?>





</form>

Now regarding what you described in this post (http://www.yiiframework.com/forum/index.php/topic,1191.0.html), this is out of the extension scope. What you should do is write a small Javascript program to handle this behaviour where, when the user checks the married box, then it enabled the kid edit box.

For instance you could add following at the end of your view file :

<script type="text/javascript">


	/*<![CDATA[*/


	jQuery(document).ready(function() {





               /*


               * replace KidsEditBoxId and marriedCheckBoxId with your actual ids


               */





		$('#KidsEditBoxId').attr('disabled', ! $('#marriedCheckBoxId).attr('checked'));


		


		$('#marriedCheckBoxId').bind('click',function(e){


			$('#KidsEditBoxId').attr('disabled', ! $(e.target).attr('checked'));


		})


	});


	/*]]>*/


</script>

8)

22

Thanks for your advice Raul, will give it a try.

Btw I also solved my problem with very simple approach as explained in this post :

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

-majin-

23

Hello! Thank you for this extenstion.

I just starting play with Yii but your extenstion seems deos not work for me. First I have problem with case sensetive file system - all links are invalid. I fixed this issue by replacing them in appropriate file. Running sample application I got form samples but nothing happens when I enter data. I looks like JS does not started or function. Could you please point me where to check problems? May it be with case sensetive files too?

24

hi redcore,

sorry for this case sensitive problem, I realized that after publishing the last release (and I'll fix it in the next one).

Regarding the other issue, do you mean that when you hit submit on sample forms it is submited without any JS validation ? If yes, what browser are you using ? Is there a JS error displayed ? One thing you could do is go to a sample form page, save it locally, zip it and post it on this topic so I can check what's going on.

bye

8)

25

Sample forms provided in the release are now visible in the demo page

26

Hi Raoul,

I find that JFormValidation is a good extension. However, in some cases it cannot validate, ex: uploaded file. It does not support to validate uploaded file: file size, file type,… So, I use CFileValidator to validate at server. But when using this extension, I find that the validation in server cannot work.

In my opinion, an extension just supports some features is ok. However, which validation it does not support, we should let server code validation work. Would you mind telling me how can I fix this problem?

I look forward to hearing from you. Thanks so much.