ajaxでvalidationを実行することはよくあるので忘れないようにメモ
FuelPHPの構成は以下で行います。
|
1 2 3 |
・Controller ・Form ・Views |
まずは、Formからです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** * Fieldsetを返却する * * @return ViewForm¥Fieldset */ public function _fieldset() { $login_form = Fieldset::forge('login_form'); $login_form->add_text('username', __('username'), array('style' => '', 'placeholder' => __('username'), 'type' => 'text')) ->add_rule('required') ->add_rule('max_length', 256); $login_form->add_password('password', __('password'), array('style' => '', 'placeholder' => __('password'))) ->add_rule('required'); return $login_form; } |
usernameとpasswordにバリデーションルールを追加しておきます。
※通常のSubmit時と同様となります。
次にControllerです。
|
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 |
/** * ログインページを表示 */ public function action_index() { $form = new Form_Login(); $fieldset = $form->_fieldset(); $fieldset->repopulate(); // templateレイアウトに可変ビューを設定 $this->template->content = View::forge('login/index', $fieldset); } /** * ログイン処理 */ public function post_login() { //結果の形式（0:成功、1:失敗） $result = array( 'result' => 0, 'message' => "" ); //初期化 $values = array(); //Fieldsetを生成 $form = new Form_Login(); $fieldset = $form->_fieldset(); $fieldset->repopulate(); // 入力チェック $val = $fieldset->validation(); //Validationする if($val->run()){ //ログイン処理 //Validationが失敗した場合 }else{ $result['result'] = 1; foreach ($val->error() as $field => $error) { Log::warning($error->get_message(), get_class($this)); $result[$field] = $error->get_message(); } } return $this->response($result); } |
Controllerではログイン画面の表示とログインチェック用のAPIを作成しています。
最後にViewとなります。
|
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
＜script＞ $(function () { // $(document).on('click', '#login-btn', function(e) { e.preventDefault(); // エラーメッセージをすべて消す $(".ajax_error").text(""); $('.div_ajax_error').addClass('hidden'); var formData = $('#login-form'); var arrQuery = formData.serializeArray(); // POST用配列 var postData = {}; var name = ''; var val = ''; // POST用のデータをまとめる for (var key in arrQuery) { name = arrQuery[key]['name']; val = arrQuery[key]['value']; postData[name] = val; } blockUI(); // ログイン $.ajax( { url: '/login/login', type: 'post', async: true, dataType : 'json', data : postData, success: function( data ) { // 正常時 if (data['result'] == 0) { location.href="/welcome"; // 異常時 } else { // データを更新 $.each(data,function(key,value){ if (key == 'message') { $('#modal_'+key).text(value); } $('#'+key+'_error').text(value); $('#div_'+key).removeClass('hidden'); }); } }, error: function( data ) { $('#modal-body-error').empty(); $('#modal-body-error').append(data.responseJSON); $('#modaldialog-error').modal('show'); }, complete: function( data ) { unblockUI(); } }); }); }); ＜/script＞ ＜div class="row"＞ ＜div class="col-xs-12"＞ ＜h2 class="title-lg"＞ ログイン ＜/h2＞ ＜div class="content content-main"＞ ＜?php echo Form::open(array('action' => Uri::segment(1).'/login/', 'method' => 'post', 'id' => 'login-form', 'class' => 'form-horizontal small')); ?＞ ＜?php // ログインID ?＞ ＜div class="form-group hidden div_ajax_error" id="div_username"＞ ＜label id="username_error" class="col-xs-9 ajax_error"＞＜/label＞ ＜/div＞ ＜div class="form-group"＞ ＜span id="title_edit" class="modal_error" style="color: red;"＞＜/span＞ ＜?php echo $this->fieldset->field('username')->label_text(['class' => 'col-xs-3 control-label']); ?＞ ＜div class="col-xs-9"＞ ＜?php echo $this->fieldset->field('username')->field_text(['class' => 'form-control input-sm']); ?＞ ＜/div＞ ＜/div＞ ＜?php // パスワード?＞ ＜div class="form-group hidden div_ajax_error" id="div_password"＞ ＜label id="password_error" class="col-xs-9 ajax_error"＞＜/label＞ ＜/div＞ ＜div class="form-group"＞ ＜span id="title_edit" class="modal_error" style="color: red;"＞＜/span＞ ＜?php echo $this->fieldset->field('password')->label_text(['class' => 'col-xs-3 control-label']); ?＞ ＜div class="col-xs-9"＞ ＜?php echo $this->fieldset->field('password')->field_text(['class' => 'form-control input-sm']); ?＞ ＜/div＞ ＜/div＞ ＜?php echo Form::button('submit', 'ログイン', array('id' => 'login-btn', 'class' => 'btn btn-default btn-sm')); ?＞ ＜?php echo Form::close(); ?＞ ＜/div＞ ＜/div＞ ＜/div＞ |
これでajaxでのバリデーションができました。
Formクラスで入力値の定義とバリデーションルールを定義することでわかりやすくなるのではないかなぁと感じています。
もっとよい方法があればご教示いただければと思います。
Comments are closed