• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
HTML5 placeholder attribute and form_validation

#1
[eluser]piddleton[/eluser]
Couldn't find anything on this topic, but my goal is to use the HTML5 "placeholder" attribute to show grey text in a form field telling the user what to enter, e.g. "Name."

I'm also using set_value to make sure that if the user submits several form fields and they don't validate, the values they enter remain in the input text boxes.

However, if I use both the placeholder and set_value on a form field, I can't get both to work: When the form first loads, if I use set_value, the placeholder text doesn't appear. So I removed set_value and the placeholder text appears. Then if I submit the form and that text field has an error, since I removed set_value, only the placeholder text appears in the input field.

Is there a CI way around this? Or, if I want to use set_value and placeholder at the same time, should I check if $_POST exists and use either placeholder or set_value?

#2
[eluser]Cristian Gilè[/eluser]
Post the controller and view code.

#3
[eluser]piddleton[/eluser]
Controller and view code posted:

CONTROLLER:

Code:
class Contact extends CI_Controller {

public function __construct()
{
  parent::__construct();
  $this->load->helper('captcha');
  $this->load->model('contact_model');  
}

public function index()
{
  $data = $this->contact_model->get_captcha_word();
  $this->load->view('contact',$data);
}

public function send()
{

  $this->load->library('form_validation');
  
  // field name, error message, validation rules
  $this->form_validation->set_rules('username', 'Name', 'trim|required');
  $this->form_validation->set_rules('email_address', 'Email Address', 'trim|required|valid_email');
  $this->form_validation->set_rules('comment', 'Comment', 'trim|required|min_length[4]');
  $this->form_validation->set_rules('captcha', 'Captcha', 'callback_captcha_check');
  
  if($this->form_validation->run() == FALSE)
  {
   $data = $this->contact_model->get_captcha_word();
   $this->load->view('contact',$data);
  }
  else
  {  
  
   if($query = $this->contact_model->insert_contact())
   {
    $this->load->view('thank_you');
   }
   else
   {
    $data = $this->contact_model->get_captcha_word();
    $this->load->view('contact',$data);
   }
  }  
}

public function captcha_check($str)
{
  //-------------------------------------------
  // Need to check captcha value from user
  // - First, delete old captchas (2 hour limit)
  //-------------------------------------------
  $expiration = time()-7200;
  $this->db->query("DELETE FROM captcha where captcha_time < ".$expiration);
  
  //-------------------------------------------
  //Now see if a captcha exists. Prep binding query
  // - If row count is 0, captchas did not match
  //-------------------------------------------
  $sql = "SELECT COUNT(*) AS count FROM captcha WHERE word = ? and ip_address = ? AND
   captcha_time > ?";
  $binds = array($_POST['captcha'], $this->input->ip_address(), $expiration);
  $query = $this->db->query($sql, $binds);
  $row = $query->row();
  
  if ($row->count == 0)
  //not a captcha match
  {
   $this->form_validation->set_message('captcha_check', 'You must submit the correct text that appears in the image.');
   return FALSE;
  }
  else
  {
   return TRUE;
  }

}
}


VIEW:
I only set the placeholder attribute on the email field in the view code

Code:
echo validation_errors('<p class="error">');
  if (isset($captcha_error))
  {
  ?&gt;
             <p class="error">You must submit the word that appears in the image.</p>
            &lt;?php  
   }
    ?&gt;
  
            <div id="contact_form">
             <p>To contact Loam, please fill out the following form. Your email will not be put on any mailing list.
            </p>
                <fieldset>
                &lt;?php
    
                $formarr = array('id' => 'contactform');  
                echo form_open('contact/send',$formarr);
                
                $namearr = array(
                    'name' => 'username',
                    'id'   => 'username'
                );
                
    
                echo form_input($namearr, set_value('username', 'Name'));

    $emailarr = array(
     'name' => 'email_address',
     'id'   => 'email_address',
     'placeholder' => 'Email Address'
    );    
    
                echo form_input($emailarr);  

              
     $data = array(
                    'name' => 'comment',
                    'id'   => 'comment',
                    'rows' => '7',
                    'cols' => '50'
                );
    
                echo form_textarea($data, set_value('comment', 'Comment'));
    
    $vals = array(
     'word'  => $word,
     'img_path'  => './captcha/',
     'img_url'  => base_url().'captcha/',
     'font_path'  => './path/to/fonts/texb.ttf',
     'img_width'  => '150',
     'img_height' => 50,
     'expiration' => 7200
       );

    $cap = create_captcha($vals);
    
    //Insert captcha information in DB to compare with
    // after user enters text to match captcha.
    $data = array(
     'captcha_time' => $cap['time'],
     'ip_address' => $this->input->ip_address(),
     'word' => $cap['word']
    );
    
    $query = $this->db->insert_string('captcha',$data);
    $this->db->query($query);
    
    echo $cap['image'] . '<br>';
    
    $caparr = array(
                    'name' => 'captcha',
                    'id'   => 'captcha'
                );
    
    echo form_input($caparr);
    
                echo form_submit('submit', 'Send');
                ?&gt;
                </fieldset>

#4
[eluser]Cristian Gilè[/eluser]
I'm not able to reproduce the error. Which browser are you using? Try this version:

Code:
$emailarr = array(
  'name' => 'email_address',
  'id'   => 'email_address',
  'placeholder' => 'Email Address',
  'value' => set_value('email_address')
);    
    
echo form_input($emailarr);

Remember to close the form.

#5
[eluser]piddleton[/eluser]
[quote author="Cristian Gilè" date="1338839405"]I'm not able to reproduce the error. Which browser are you using? Try this version:

Code:
$emailarr = array(
  'name' => 'email_address',
  'id'   => 'email_address',
  'placeholder' => 'Email Address',
  'value' => set_value('email_address')
);    
    
echo form_input($emailarr);

Remember to close the form.[/quote]

Success!

That change worked to use set_value as part of the array instead of a parameter to form_input.

Thanks a bunch. Closed the form as well. Smile


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.