[EXTENSION] Javascript form Validation

Raoul · March 20, 2009, 6:33pm

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.

majin · March 21, 2009, 1:11am

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-

majin · March 21, 2009, 1:42am

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

Raoul · March 21, 2009, 10:13am

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

Raoul · March 21, 2009, 12:13pm

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

majin · March 21, 2009, 2:31pm

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

Raoul · March 21, 2009, 3:34pm

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>

majin · March 24, 2009, 3:44am

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-

system · April 2, 2009, 11:58am

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?

Raoul · April 3, 2009, 10:45pm

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

Raoul · April 4, 2009, 3:14pm

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

PansyNguyen · April 5, 2009, 8:11am

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.

Raoul · April 5, 2009, 10:35am

Hi PansyNguyen,

You’re right, JFormValidate is not the apropriate answer for client-side form validation in all situation, and this is because :

not all built-in yii validators are supported by the extension (see chapter 'limitation' from the enclosed documentation)
in some cases, it make no sense to rely on client-side validation

In particular, it is not possible to implement the CFileValidator on the client-side because validation rules it provides only have sense when the file is uploaded, so they can only be applied on the server side ( e.g. JFormValidate could handle a required rule for the file upload field, but not more ).

Another point (that you probably already know) is that client-side validation is not a replacement for server-side validation, it is just an optimization preventing the server to process too much validation requests. Server-side validation must remain.

Now regarding JFormValidation supported rules, I’m waiting for the next Yii release to provide a new version of the extension which will include some new rules…

Hope this helps …

Raoul · April 15, 2009, 10:02am

Hi all,

I’ve released a new version for the jformvalidate extension. This release fixes some case sensitive issues with the sample forms. It also provides a new class called EHtml dedicated to be used as a wrapper for CHtml helper class, so adding client-side validation to an existing form is very easy.

Ressources :

online demo
documentation (see attached file)
extension page

Any feedback is welcome … yes, I mean, it seems that this extension has been download more than 200 times but still I didn't receive any feedback up to now ! is it useful ? is it full of bug ? should I continue maintain it ? … I'm not sure. Maybe there is a better way to implement this feature …

Anyway, hope this helps

letscode · April 15, 2009, 6:19pm

Hello Raoul,

I found a few bugs in the latest version:

Use of undefined constant attributeLabels - assumed 'attributeLabels'

…protected/extensions/jformvalidate/EJFValidate.php(262)

This is because line 262:

if(method_exists($this->_model,attributeLabels)){

has to be

if(method_exists($this->_model,'attributeLabels')){

But after that I get the following error on my model rule:

array('UsrActive', 'numerical', 'integerOnly'=>true),

Undefined index: notInt

…/protected/extensions/jformvalidate/EJFValidate.php(369)

Raoul · April 16, 2009, 8:25am

hi letscode,

thanks for pointing the first error, I'll correct it right away and republish the zip.

Regarding the second error, in fact that’s just a warning because you may be running your php program in error_reporting(E_ALL), which displays messages for reference to unassigned array elements. Anyway, that’s another improvment I’ve added to the extension.

So, I release a new version that should correct your problems. Could you please confirm that everything is ok now so I can officially release it in the extension section ?

Thanks for your help

MD5 : 1f4de6d97fbf437e198a236cb5c19e0f

letscode · April 16, 2009, 1:26pm

Thanks,

the latest version works!

Raoul · April 16, 2009, 1:47pm

great ! I'll publish it then …

xibicc · April 29, 2009, 1:17am

ajaxSubmitButton is not validate the form When submitting

For example:EHtml::ajaxSubmitButton('Submit','',array('dataType'=>'script'));

Raoul · May 8, 2009, 10:14am

that is right … but as I’m on holidays right now, it’ll wait until I’m back

(and if in the meantime you’ve fixed it, send me the code and I’ll add it to next release )