Welcome Guest, Not a member yet? Register   Sign In
Form loses style upon validation process
#1

[eluser]John Lopez[/eluser]
Hi guys, I was just playing around with form validation, but I really really can't figure out why my form loses its style when the validation process starts to run. I have my blocks of code below, hope you can help me out:

Controller
Code:
class Home_controller extends CI_Controller {
    
    function index () {
        $this->load->view('home_view');
    }
    
    function form_validate () {
        $this->load->library('form_validation');
        $this->load->library('encrypt');
        
        # set validation rules
        $this->form_validation->set_rules('username', 'username', 'trim|required');
        $this->form_validation->set_rules('password', 'password', 'trim|matches[passwordconf]|min_length[7]|required|sha1');
        $this->form_validation->set_rules('passwordconf', 'passwordconf', 'trim|matches[password]|min_length[7]|required|sha1');
        $this->form_validation->set_rules('email', 'email', 'trim|valid_email|required');
        $this->form_validation->set_rules('fname', 'first name', 'trim');
        $this->form_validation->set_rules('lname', 'last name', 'trim');
        
        if ($this->form_validation->run() == TRUE) {
            echo '<h1>Thank you for registering!</h1>';
        } else {
            $this->load->view('home_view');
        }
        
    }
    
}

View
Code:
&lt;?php $this->load->view('home_header'); ?&gt;
<h1>Tutorial: Simple Registration</h1>

&lt;?php
# set attributes of form components

# form attributes
$form_attrib = array (
    'id'            => 'form',
    'name'          => 'form',
    'method'        => 'post'
);

# username field attributes
$username_attrib = array (
    'id'            => 'username',
    'class'         => 'input_field',
    'name'          => 'username',
    'placeholder'   => 'Desired username'
);

# password field attributes
$password_attrib = array (
    'id'            => 'password',
    'class'         => 'input_field',
    'name'          => 'password',
    'placeholder'   => 'Desired password'
);

# password confirmation field attributes
$passwordconf_attrib = array (
    'id'            => 'passwordconf',
    'class'         => 'input_field',
    'name'          => 'passwordconf',
    'placeholder'   => 'Confirm password'
);

# email field attributes
$email_attrib = array (
    'id'            => 'email',
    'class'         => 'input_field',
    'name'          => 'email',
    'placeholder'   => 'Existing email address'
);

# first name field attributes
$fname_attrib = array (
    'id'            => 'fname',
    'class'         => 'input_field',
    'name'          => 'fname',
    'placeholder'   => 'First name'
);

# last name field attributes
$lname_attrib = array (
    'id'            => 'lname',
    'class'         => 'input_field',
    'name'          => 'lname',
    'placeholder'   => 'Last name'
);

# submit button attributes
$submit_attrib = array (
    'id'            => 'submit',
    'name'          => 'submit',
    'value'         => 'Submit'
);
?&gt;

&lt;?php echo form_open('home_controller/form_validate', $form_attrib); ?&gt;
    &lt;?php echo form_input($username_attrib); ?&gt;
    &lt;?php echo form_error('username'); ?&gt;
    
    &lt;?php echo form_password($password_attrib); ?&gt;
    &lt;?php echo form_error('password'); ?&gt;

    &lt;?php echo form_password($passwordconf_attrib); ?&gt;
    &lt;?php echo form_error('passwordconf'); ?&gt;

    &lt;?php echo form_input($email_attrib); ?&gt;
    &lt;?php echo form_error('email'); ?&gt;
    
    &lt;?php echo form_input($fname_attrib); ?&gt;
    &lt;?php echo form_error('fname'); ?&gt;

    &lt;?php echo form_input($lname_attrib); ?&gt;
    &lt;?php echo form_error('lname'); ?&gt;

    &lt;?php echo form_submit($submit_attrib) ?&gt;
&lt;?php echo form_close(); ?&gt;
&lt;?php $this->load->view('home_footer'); ?&gt;

Header
Code:
<!DOCTYPE HTML>

&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;CI Series : Form Login&lt;/title&gt;
        
        &lt;link rel="stylesheet" href="css/style.css" media="screen" /&gt;
    &lt;/head&gt;
    &lt;body&gt;

Footer
Code:
&lt;/body&gt;
&lt;/html&gt;

*** The default run displays the styling perfectly. I guess it's being eaten by the forms, huh? :gulp:
#2

[eluser]John Lopez[/eluser]
Oh yeah, the CSS: (with webkit only for now)

Code:
body {
    background: #fff;
    margin: auto;
    font: normal 14px Verdana, sans-serif;
    color: #777777;
}

h1 {
    color: #6c6c6c;
    background: transparent;
    border-bottom: 1px solid #6c6c6c;
    font: bold 16px;
    margin: 24px 0 24px 0;
    padding: 5px 0 5px 0;
}

input {
    display: block;
    margin: 9px 15px;
    width: 250px;
}

.input_field {
    padding: 5px 10px;  
    -webkit-border-radius: 4px;
    border: 1px solid #efefef;
    color: #7c7c7c;
}

.input_field:hover{
    border: 1px solid #e1e1e1;
    background: #efefef;
}

#submit {
    padding: 5px 10px;
    margin: 9px 15px;
    width: 250px;
    background: #333;
    color: #fff;
    font-weight: bold;
    border: 1px #333;
    -webkit-border-radius: 4px;
}

#submit:hover {
    background: #676767;
    cursor: pointer;
}
#3

[eluser]jmadsen[/eluser]
change your stylesheet declaration to

Code:
&lt;link rel="stylesheet" href="&lt;?= base_url()?&gt;css/style.css" media="screen" /&gt;
#4

[eluser]John Lopez[/eluser]
thanks a lot!
#5

[eluser]boltsabre[/eluser]
Off topic, but:

Code:
$this->form_validation->set_rules('email', 'email', 'trim|valid_email|required');

You don't need the 'required' validation... for 'valid_email' to validate there has to be something in the field ;-)

Unless of course you want to display an error message when the user doesn't enter anything, in which case you'd have to place 'required' before 'valid_email' - the validations run in order from left to right, and as soon as one fails CI exits that field validation with the error message relevant to the validation check that failed (this stops your application from consuming extra resources by continuing to validate a field which has already failed a previous rule).




Theme © iAndrew 2016 - Forum software by © MyBB