Login

Deepak Basnal · 06-17-2016, 03:13 AM

Hello guys.
I am facing a problem. I am using ion_auth library in my CI project and rendering views in bootstrap modal. Anyone please guide me how to pass validation errors to bootstrap modal.
Thanks in advance

Paradinight · 06-17-2016, 11:33 PM

(06-17-2016, 03:13 AM)Deepak Basnal Wrote: Hello guys.
I am facing a problem. I am using ion_auth library in my CI project and rendering views in bootstrap modal. Anyone please guide me how to pass validation errors to bootstrap modal.
Thanks in advance

How do you send the form?
If ajax, you can return a json and check it.

edit small example:
controller\Modal.php

PHP Code:
<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Modal extends CI_Controller {

    function __construct() {
        parent::__construct();
    }

    public function index() {
        $this->load->view('modal_test');
    }

    public function add() {

        $this->load->helper(array('form', 'url'));

        $this->load->library('form_validation');

        $this->form_validation->set_rules('recipient', 'Recipient', 'required');
        $this->form_validation->set_rules('message', 'Message', 'required');

        $data = array();
        if ($this->form_validation->run() == FALSE) {
            $data = array(
                'code' => 1,
                'msg' => validation_errors()
            );
        } else {
            $data = array(
                'code' => 0,
                'msg' => 'succes'
            );
        }
        
        echo json_encode($data);
    }

} 

view\modal_test.php

PHP Code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link href="<?= base_url('assets/css/bootstrap.min.css') ?>" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <div id="form1_box" class="alert hidden" role="alert"></div>
                        <form id="form1">
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">Recipient:</label>
                                <input type="text" class="form-control" id="recipient-name" name="recipient">
                            </div>
                            <div class="form-group">
                                <label for="message-text" class="control-label">Message:</label>
                                <textarea class="form-control" id="message-text" name="message"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="sendform1">Save changes</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="<?= base_url('assets/js/bootstrap.min.js') ?>"></script>

        <script>
            $("#sendform1").click(function () {
                $.post('<?= site_url('modal/add') ?>', $('#form1').serialize(), function (data) {
                    if (data.code === 1)
                    {
                        $("#form1_box").removeClass('alert-success').addClass('alert-danger').removeClass('hidden').html(data.msg);
                    } else {
                        $("#form1_box").removeClass('alert-danger').addClass('alert-success').removeClass('hidden').html(data.msg);
                    }
                }, 'json');
            });
        </script>  
    </body>
</html> 

Deepak Basnal · 06-17-2016, 11:52 PM

(06-17-2016, 11:33 PM)Paradinight Wrote:
(06-17-2016, 03:13 AM)Deepak Basnal Wrote: Hello guys.
I am facing a problem. I am using ion_auth library in my CI project and rendering views in bootstrap modal. Anyone please guide me how to pass validation errors to bootstrap modal.
Thanks in advance

How do you send the form?
If ajax, you can return a json and check it.

Thanks #Paradinight. I made a silly mistake. Now it's working. Big Grin