Welcome Guest, Not a member yet? Register   Sign In
Styling validation errors
#1

[eluser]the future darlo manager[/eluser]
This is causing me a few problems. Just wondering if I'm missing something really easy. I like to show my validation errors before the form but wrap them in a styled div class. Basically something like the below...

Code:
<div class="errors">
Error with the username field
Error with the password field
</div>

I know I can used $this->validation->set_error_delimiters('<div class="error">', '</div>'); if I wanted to but this obviously wraps the div around each error and not all of them in one go. Any ideas? My controller and view is shown below...

Code:
&lt;?php

class Welcome extends Controller {

    function Welcome()
    {
        parent::Controller();    
    }
    
    function index()
    {
        $this->load->view('home_page');
    }
    
    function register()
    {
        //Validation Rules
        $rules['username'] = "trim|required|min_length[5]|max_length[12]|xss_clean";
        $rules['first_name'] = "trim|required|min_length[5]|max_length[12]|xss_clean";
        $rules['last_name'] = "trim|required|min_length[5]|max_length[12]|xss_clean";
        $rules['password'] = "trim|required|matches[passconf]|xss_clean";
        $rules['passconf'] = "trim|required|min_length[5]|max_length[12]|xss_clean";
        $rules['email'] = "trim|required|valid_email";
        $this->validation->set_rules($rules);
        
        //Sets the fields for use in the view
        $fields['username'] = 'Username';
        $fields['first_name'] = 'First Name';
        $fields['last_name'] = 'Last Name';
        $fields['password'] = 'Password';
        $fields['passconf'] = 'Password Confirmation';
        $fields['email'] = 'Email Address';
        $this->validation->set_fields($fields);
        
        //Checks to see if the validation has been succesful
        if ($this->validation->run() == FALSE)
        {
            $this->load->view('register');
        }
        else
        {
            echo "Validation succesful. Do something.";
        }
        
    }
}
?&gt;

Code:
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;title&gt;BSL Learning Support&lt;/title&gt;
&lt;link rel="stylesheet" href="&lt;?php echo base_url(); ?&gt;css/layout2.css" /&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;/head&gt;
&lt;body&gt;

    <div class="wrapper">
        <div id="logo">
            <img src="&lt;?php echo base_url(); ?&gt;images/logo.gif">
        </div>
        
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Section One</a></li>
            <li><a href="#">Section Two</a></li>
            <li><a href="#">Section Three</a></li>
            <li><a href="#">Section Four</a></li>
            <li><a href="#">Section Five</a></li>
            <li><a href="http://www.cacdp.org.uk/">CACDP Website</a></li>
        </ul>
        </div>


    <div id="top">
        <div class="wrapper">
        
            <div class="text_full_width">
            <h2>Register for BSL 101 Resource</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam a metus. Suspendisse fermentum dolor ut lacus. Suspendisse neque arcu, vehicula in, tincidunt ut, ornare vel, velit. Donec vel tortor. Proin turpis metus, viverra in, ullamcorper pulvinar, iaculis ut, purus. Suspendisse varius neque id pede. Aliquam erat volutpat. Nam ac nisl non purus varius tempor. Curabitur vehicula dictum turpis. Duis est nisl, tincidunt nec, adipiscing a, dictum eu, sapien. Cras ultrices bibendum nulla. Sed euismod lorem tincidunt metus. Ut tincidunt urna ut dui suscipit sagittis. Sed scelerisque metus non dui. Etiam vitae ipsum. Pellentesque placerat tincidunt urna. Cras purus diam, tristique eget, lobortis vel, facilisis ac, odio.</p>
            </div>
        
        </div>
    </div>
    
    <div class="wrapper">
        
        <div class="content_middle">
        
            <h2>Register</h2>

            &lt;?php echo $this->validation->error_string; ?&gt;

            &lt;?php echo form_open("welcome/register");?&gt;
            <p><lebel>Username</label> &lt;input type="text" name="username" value="&lt;?php echo $this-&gt;validation->username;?&gt;" size="50" /></p>
            <p><lebel>First Name</label> &lt;input type="text" name="first_name" value="&lt;?php echo $this-&gt;validation->first_name;?&gt;" size="50" /></p>
            <p><lebel>Last Name</label> &lt;input type="text" name="last_name" value="&lt;?php echo $this-&gt;validation->last_name;?&gt;" size="50" /></p>
            <p><lebel>Password</label> &lt;input type="text" name="password" value="&lt;?php echo $this-&gt;validation->password;?&gt;" size="50" /></p>
            <p><lebel>Password Confirm</label> &lt;input type="text" name="passconf" value="&lt;?php echo $this-&gt;validation->passconf;?&gt;" size="50" /></p>
            <p><label>Email Address</label> &lt;input type="text" name="email" value="&lt;?php echo $this-&gt;validation->email;?&gt;" size="50" /></p>
            <div>&lt;input type="submit" value="Submit" /&gt;&lt;/div>
            &lt;/form&gt;
            
        </div>
        
    </div>

&lt;/body&gt;
&lt;/html&gt;
#2

[eluser]Matthew Lanham[/eluser]
The easiest way is to wrap the actual PHP in the div, so change from:
Code:
<h2>Register</h2>
&lt;?php echo $this->validation->error_string; ?&gt;

to:
Code:
<h2>Register</h2>
<div class="errors">
    &lt;?php echo $this->validation->error_string; ?&gt;
</div>
#3

[eluser]xwero[/eluser]
You you set the delimiters to empty strings, or the second one to a br tag and then you check it the validation->error_string has content or not, if it has you can add your container p tag (a div is for grouping tags like the fieldset tag for the form elements)
#4

[eluser]mattpointblank[/eluser]
Is xwero's solution above the only way to do this? It feels kinda messy that I now have to replace all instances of

Code:
&lt;?php echo validation_errors(); ?&gt;

with added <li> delimiters:

Code:
&lt;?php if(strlen(validation_errors())) { ?&gt;
<div class="errors">
<ul>
&lt;?php echo validation_errors(); ?&gt;
</ul>
</div>
&lt;?php } ?&gt;
#5

[eluser]Geoffrey[/eluser]
Code:
$this->form_validation->set_error_delimiters('', '<br />');

if ($this->form_validation->run() == FALSE)
{
    $errors = @validation_errors();
    if (!empty($errors))
    {
        $this->session->set_flashdata("messages","<p class='errors'>" . $errors . "</p>\n\n");
    }
    redirect();
}

Of course, this is using the new 1.7 form validation not the older 1.6 version you appear to be using but the principal is the same.

After the redirect, I read the flashdata session variable and output it to the screen above the form in a css formatted box.
#6

[eluser]kirkaracha[/eluser]
Code:
&lt;?php
if(!empty($this->form_validation->_error_array)){
    $display = '<div id="errors">';
    $display .= '<p>Sorry, we had some trouble with your form.</p>';
    $display .= '<ul>';
    foreach ($this->form_validation->_error_array as $this_error){
        $display .= '<li>' . $this_error . '</li>';
    }
    $display .= '</ul>';
    $display .= '</div>';
    echo $display;
}
?&gt;
#7

[eluser]mattpointblank[/eluser]
^ Yep, that's basically what my code does - my issue is that this is a lot of markup where I once just had echo validation_errors() - I was asking if it was possible to put this code somewhere into the config so I could still just echo out the error. I guess I could edit the function or override it in the core, never mind...
#8

[eluser]kirkaracha[/eluser]
I embed a view for displaying errors into my form views:
Code:
$this->load->view('shared/display_error_messages');




Theme © iAndrew 2016 - Forum software by © MyBB