Validation of completed fields of a form

Question

Today I have some cupboards in windows (modals) and some of these fields need to force the user to fill today I am doing as follows:

Form:

In case the user forgets to fill some field I use the following code where valid my form and if there is an error it returns a message:

Code:

function inserir() {

        $this->template->set('title', 'Inserir Clientes');
        /* Carrega a biblioteca do CodeIgniter responsável pela validação dos formulários */
        $this->load->library('form_validation');

        /* Define as tags onde a mensagem de erro será exibida na página */
        $this->form_validation->set_error_delimiters('<span>', '</span>');

        /* Define as regras para validação */
        $this->form_validation->set_rules('cnome', 'Nome', 'required|max_length[40]');
        $this->form_validation->set_rules('emailc', 'E-mail', 'trim|required|valid_email|max_length[100]');
        $this->form_validation->set_rules('contato', 'Contato', 'trim|required|max_length[20]');
        $this->form_validation->set_rules('telefone', 'Telefone', 'trim|required|max_length[20]');
        $this->form_validation->set_rules('cidade', 'Cidade', 'trim|required|max_length[60]');
        $this->form_validation->set_rules('nameR', 'Representante', 'trim|required|max_length[60]');

        /* Executa a validação e caso houver erro chama a função index do controlador */
        if ($this->form_validation->run() === FALSE) {

            $this->session->set_flashdata('mensagem', "<div class='alert alert-danger'> preencha todos os campos antes de salvar </div>");
                redirect('clientes');
            /* Senão, caso sucesso: */
        } else {

            /* Recebe os dados do formulário (visão) */
            $data['cnome'] = ucwords($this->input->post('cnome'));
            $data['contato'] = ucwords($this->input->post('contato'));
            $data['telefone'] = $this->input->post('telefone');
            $data['emailc'] = strtolower($this->input->post('emailc'));
            $data['cidade'] = ucwords($this->input->post('cidade'));
            $data['representante'] = ucwords($this->input->post('nameR'));

            /* Chama a função inserir do modelo */
            if ($this->model->inserir($data)) {
                $this->session->set_flashdata('mensagem', "<div class='alert alert-success'> Cliente salvo com sucesso</div>");
                redirect('clientes');
            } else {
                $this->session->set_flashdata('mensagem', "<div class='alert alert-danger'> Erro ao inserir cliente</div>");
                redirect('clientes');
            }

        }
    }

Message returned in case of error:

Now explaining what I seek to do, I want to make the system more functional today if the user forgets some field it is returns the listing page and needs to open the function to register again and inform all fields again, my idea now is that if he forgets some field and click save the modal is not closed and yes that the field(s) he did not fill are highlighted in red, for this I believe I will need to use javascript,this is my doubt.

Answer 1

This can be done through the HTML itself, just add required:

<input type="text" name="usrname" required>

It is a simple and functional option.

Answer 2

Hello, follow the steps and adapt to your code to achieve the effect you want.

Create a private function to validate the form

private function form_cliente_insert()
{
    $this->load->library('form_validation');

    /* Define as regras para validação */
    $this->form_validation->set_rules('cnome', 'Nome', 'required|max_length[40]');
    $this->form_validation->set_rules('emailc', 'E-mail', 'trim|required|valid_email|max_length[100]');
    $this->form_validation->set_rules('contato', 'Contato', 'trim|required|max_length[20]');
    $this->form_validation->set_rules('telefone', 'Telefone', 'trim|required|max_length[20]');
    $this->form_validation->set_rules('cidade', 'Cidade', 'trim|required|max_length[60]');
    $this->form_validation->set_rules('nameR', 'Representante', 'trim|required|max_length[60]');

    // Vamos precisar retornar o _check_form para saber se vamos reabrir o modal ou não
    $_check_form = $this->form_validation->run();

    if ( $_check_form === FALSE ) {
        $this->session->set_flashdata('mensagem', "<div class='alert alert-danger'> preencha todos os campos antes de salvar </div>");
        /* Senão, caso sucesso: */
    } else {

        /* Recebe os dados do formulário (visão) */
        $data['cnome'] = ucwords($this->input->post('cnome'));
        $data['contato'] = ucwords($this->input->post('contato'));
        $data['telefone'] = $this->input->post('telefone');
        $data['emailc'] = strtolower($this->input->post('emailc'));
        $data['cidade'] = ucwords($this->input->post('cidade'));
        $data['representante'] = ucwords($this->input->post('nameR'));

        /* Chama a função inserir do modelo */
        if ($this->model->inserir($data)) {
            $this->session->set_flashdata('mensagem', "<div class='alert alert-success'> Cliente salvo com sucesso</div>");
        } else {
            $this->session->set_flashdata('mensagem', "<div class='alert alert-danger'> Erro ao inserir cliente</div>");
        }
    }

    return $_check_form;
}

Add this code to the Controller that manages the customers page

// Valor padrão, não mostra o modal
$data['open_modal_cliente'] = false;

if(!empty($_POST))
{
    // Valor negativo pois em caso de sucesso, retorna TRUE
    // Precisamos apenas de quando for FALSE, que é quando não validou e precisamos
    // reabrir o modal. Será necessário enviar este campo para a view..
    $_re_open_modal = !$this->form_cliente_insert();

    $data['open_modal_cliente'] = $_re_open_modal;  
}

In the view, put the set_value with the name of the field

<input class="form-control" type="text" name="telefone" value="<?php echo set_value('telefone'); ?>" />

In the footer, check if you need to open the modal and open it if necessary. The example below assumes that you are using the modal of the bootstrap.

<?php if($open_modal_cliente): ?>
<script>
    document.addEventListener('DOMContentLoaded', function(){ 
        $('#nome-do-seu-modal').modal({
            keyboard: false,
            backdrop: 'static',
            show: true
        });
    }, false);
</script>
<?php endif ?>

The secret is not to use redirect because when you use it, you lose the $_POST information. See if you can make this implementation, in case of doubt send us. ;)

Answer 3

The ideal would be to post the form code and library used so that we can test it.

But I believe that commenting redirect('clientes'); in

  $this->session->set_flashdata('mensagem', "<div class='alert alert-danger'> preencha todos os campos antes de salvar </div>");
  //redirect('clientes');

should solve your problem!