intro
Ajaxを使用してZend Formのバリデーションを行います。Dojoを使用しています。
デモサイトより動作を確認できます。
デモサイトより動作を確認できます。
1.コントローラの作成
以下のように
application/constorllers/IndexController.php
ファイルを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?php require_once 'Zend/Controller/Action.php'; require_once 'Zend/Form.php'; class IndexController extends Zend_Controller_Action { public function getProfileForm() { $form = new Zend_Form(); $form->setName('profileForm') ->setAction($this->_request->getBaseUrl() . '/index/profile') ->setMethod('post'); $givenName = $form->createElement('text', 'givenName'); $givenName->setLabel('Given Name') ->setRequired(true) ->addFilter('stringTrim') ->addValidator('stringLength', false, array(1,50)); $familyName = $form->createElement('text', 'familyName'); $familyName->setLabel('Family Name') ->setRequired(true) ->addFilter('stringTrim') ->addValidator('stringLength', false, array(1,50)); $email = $form->createElement('text', 'email'); $email->setLabel('E-Mail') ->setRequired(true) ->addFilter('stringTrim') ->addValidator('emailAddress', false); $url = $form->createElement('text', 'url'); $url->setLabel('URL') ->setRequired(false) ->addFilter('stringTrim') ->addValidator('stringLength', false, array(1,100)); $submit = $form->createElement('submit', 'submit'); $submit->setLabel('Send'); $form->addElements(array( $givenName, $familyName, $email, $url, $submit )); return $form; } public function init() { $ajaxContext = $this->_helper->getHelper('AjaxContext'); $ajaxContext->addActionContext('validate', 'json') ->initContext(); } public function indexAction() { $this->_forward('profile'); } public function profileAction() { $form = $this->getProfileForm(); if ($this->getRequest()->isPost()) { if ($form->isValid($_POST)) { $values = $form->getValues(); $this->view->values = $values; } } $this->view->form = $form; } public function validateAction() { if ($this->getRequest()->isPost()) { $data = $this->getProfileForm()->processAjax($_POST); $this->_helper->json->sendJson($data); } } } |
2.ビューの作成
以下のように
application/views/scripts/index/profile.phtml
ファイルを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<h1><?= $this->translate('Your Profile'); ?></h1> <?php if($this->values) : ?> <h3><?= $this->translate('You just submitted the following values'); ?>:</h3> <ul> <?php foreach ($this->values as $value) :?> <li> <?= $this->escape($value); ?> </li> <?php endforeach; ?> </ul> <?php else : ?> <?= $this->form; ?> <?php endif; ?> <script type="text/javascript"> var djConfig = { isDebug:true, parseOnLoad:true }; </script> <script type="text/javascript" src="<?= $this->baseUrl . '/js/dojo/dojo.js'?>"> </script> <script type="text/javascript"> // sumbit the form var formSubmit = function(e){ // prevent the form from actually submitting e.preventDefault(); // submit the form in the background dojo.xhrPost({ url: "<?=$this->url(array('action'=>'validate'))?>/format/json", form: "profileForm", handleAs: "json", handle: function(data,args){ if(typeof data == "error") { console.warn("error!",args); } else if (data == "true") { clearFormError(); alert("OK!"); } else { // show our response console.log(data); json = eval("(" + data + ")"); clearFormError(); for (elem in json) { msg = "<ul>"; for (err in json[elem]) { msg += "<li>" + json[elem][err] + "</li>"; } msg += "</ul>"; dojo.byId(elem + "_error").innerHTML = msg; } } } }); }; dojo.addOnLoad(function(){ var theForm = dojo.byId("profileForm"); // another dojo.connect syntax: call a function directly dojo.connect(theForm,"onsubmit",formSubmit); }); function clearFormError() { var myForm = dojo.byId('profileForm'); var elements = myForm.elements; for (var i = 0; i < elements.length; i++) { if (dojo.byId(elements[i].name + "_error")) { dojo.byId(elements[i].name + "_error").innerHTML = ""; } else if(dojo.byId(elements[i].name)) { div = document.createElement("div"); div.setAttribute("id", elements[i].name + "_error"); dojo.byId(elements[i].name).parentNode.appendChild(div); } } } </script> |
3.確認
Webサーバにアクセスし、項目ごとにバリデーションが実施されていることを確認してください。
履歴
日付 | 内容 |
---|---|
2008/4/28 | 公開 |
2008/4/28,29 | javascriptのバグを修正しました。 |