Codeigniter Form Validation - Showing Errors Individually problems


Tags: php,html,css,codeigniter

Problem :

My form is in table and I try to write error message of form validation next to input space. (I put it in the third column)

the problems is the form_error() function that make more line-height between row in table. How should I do? because if I use CSS, it will make the "before error message occurred's line-height" wrong. Do I need to write the if-else of before-after button submit situation?

<table>
        <tr>
            <td>Username : </td>
            <td><input type="text" name="username" value="<?php echo set_value('username'); ?>"/></td>
            <?php
            if($this->input->post("btn") == null)
            {
                echo "<td><span style='font-size: 10px;color:red'>ขั้นต่ำ 6 ตัวอักษร</span></td>";
            }
            else
            {
                echo "<td><span style='font-size:10px;color:red;'>" . form_error('username') ."</span></td>";
            }
            ?>
        </tr> 
        <tr>
            <td>Password : </td>
            <td><input type="password" name="pass" value=""/></td>
            <?php
            if($this->input->post("btn") == null)
            {
                echo "<td><span style='font-size: 10px;color:red'>ขั้นต่ำ 6 ตัวอักษร</span></td>";
            }
            else
            {
                echo "<td><span style='font-size:10px;color:red;'>" . form_error('pass') ."</span></td>";
            }
            ?>
        </tr>
        <tr>
            <td>ยืนยัน Password : </td>
            <td><input type="password" name="pass_confirm" value=""/></td>
            <td><span style="font-size:10px;color:red;"><?php echo form_error('pass_confirm');?></span></td>
        </tr>
        <tr>
            <td>Email : </td>
            <td><input type="text" name="email" value="<?php echo set_value('email'); ?>"/></td>
            <td><span style="font-size:10px;color:red;"><?php echo form_error('email');?></span></td>
        </tr>
        <tr>
        <td colspan="2"><span style="font-size: 10px;color:red;">กรุณากรอกเบอร์มือถือ เพื่อรับ Code ยืนยันการสมัคร (ตัวอย่างเบอร์มือถือ 08xxxxxxxx)</span></td>
        </tr>
        <tr>
            <td>เบอร์มือถือ : </td>
            <td><input type="text" name="phone" value="<?php echo set_value('phone'); ?>"/></td>
            <td><span style="font-size:10px;color:red;"><?php echo form_error('phone');?></span></td>
        </tr>
        <tr>
            <td>กรอกรหัสภาพ :</td>
            <td>    
                <?php echo $captcha['image']; ?>
                <br>
                <input type="text" autocomplete="off" name="userCaptcha" placeholder="Enter above text" value="<?php if(!empty($userCaptcha)){ echo $userCaptcha;} ?>" />
                <?php echo form_error('userCaptcha','<p style="font-size:10px;color:red">','</p>'); ?>
            </td>

        </tr>
    </table>


Solution :

You can load error delimiters for all the errors in one place,in relevant controller's function, need not to define them separately,

you can control the error message height and styles there

$this->form_validation->set_error_delimiters('<span style="font-size: 10px;color:red">', '</span>');

and need not to use 'if-else' in 'form-error' so use

 <tr>
     <td>Username : </td>
     <td><input type="text" name="username" value="<?php echo set_value('username'); ?>"/>
        <?php
           // if there is validation error, it shows here
          echo form_error('username');
        ?>
   </td>
  </tr> 

    CSS Howto..

    How to center an icon inside css shapes?

    How to apply CSS styles to links that appear in table headers?

    how to change inline css to free attributes

    How to add CSS if element has more than one child?

    How a checkbox will trigger another input element in html via javascript?

    How to trigger click on links with the same class?

    jQuery hide show id

    How to modify self and other classes with CSS :hover?

    How to force floating blocks staying in the same row in css?

    how to center background image in window resize

    How to turn off :hover with CSS?

    How to stop DIVS from colliding when page resized (footer)?

    How do I change linked stylesheets?

    How to change an input button with pure css button (no images)? [duplicate]

    How can I use a different CSS using jQuery?

    Show background image out of the div [closed]

    How to apply CSS page-break to print a table with lots of rows?

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    How do I remove a CSS class from one anchor and assign it to another using jquery?

    How to create different and unique ID for some class in css?

    How to make a CSS transition work “backwards”?

    How to style this views in drupal 7 /custom content type/?

    How to have div fill width and height of browser window and not have the image be streched

    How could I use pseudo-element :after :before conditionally

    How to apply custom css class to extjs grid column, and remove it with delay?

    How do I create a margins on Google maps? [closed]

    css book on css box model, how block element width can get affected etc

    How To Wrap A Div When Parent Container Shrinks Using CSS

    How do I create 3D perspective using CSS3?

    How can I properly display my divs in masonry style using flex?