I need this markup for file input:
<label class="col-sm-12">File upload</label>
<div class="col-sm-12">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="...">
</span>
<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a
</div>
<ul class="errors">
<li>Some error</li>
</ul>
</div>
I tried it like that:
<label class="col-sm-12">Attachment</label>
<div class="col-sm-12">
<?php echo $this->form->attachment; ?>
</div>
With very difficult decorator:
$this->fileDecorator = array(
array(
array('divOpen' => 'HtmlTag'), array('tag' => 'div', 'class' => 'form-control', 'data-trigger' => 'fileinput', 'openOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
array('i' => 'HtmlTag'), array('tag' => 'i', 'class' => 'glyphicon glyphicon-file fileinput-exists', 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
array('span' => 'HtmlTag'), array('tag' => 'span', 'class' => 'fileinput-filename', 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
array('divClose' => 'HtmlTag'), array('tag' => 'div', 'closeOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
array('spanOpen' => 'HtmlTag'), array('tag' => 'span', 'class' => 'input-group-addon btn btn-default btn-file', 'openOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
'Callback',
array('callback' =>
function($content, $element, $options) {
return "<span class=\"{$options['class']}\">{$options['text']}</span><span class=\"{$options['class2']}\">{$options['text2']}</span>";
},
'class' => 'fileinput-new',
'text' => $this->translator->_('_selectFile'),
'class2' => 'fileinput-exists',
'text2' => $this->translator->_('_change')
)
),
'File',
array(
array('spanClose' => 'HtmlTag'), array('tag' => 'span', 'closeOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)
),
array(
'Callback',
array('callback' =>
function($content, $element, $options) {
return "{$options['text']}";
},
'class' => 'input-group-addon btn btn-default fileinput-exists',
'text' => $this->translator->_('_remove'),
'data-dismiss' => 'fileinput'
)
),
array(
array('div' => 'HtmlTag'), array('tag' => 'div', 'class' => 'fileinput fileinput-new input-group', 'data-provides' => 'fileinput')
),
'Errors'
);
But problem is, that Callback can be only once in decorator (not like HtmlTag). And tag with content is not possible add without callback. It can be solved with more callbacks or differently?
Edit:
I have idea. Is possible to add File decoratror to Callback decorator?
It is simple like that:
<div class="form-group<?php echo count($this->form->attachment->getErrors()) ? ' has-error has-feedback' : null; ?>">
<label class="col-sm-12"><?php echo $this->form->attachment->renderLabel(); ?></label>
<div class="col-sm-12">
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput">
<i class="glyphicon glyphicon-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn btn-default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<?php echo $this->form->attachment->renderFile(); ?>
</span>
Remove
</div>
<?php echo $this->formErrors($this->form->attachment->getMessages()); ?>
</div>
</div>
Related
I am making 2 step registration. I have done the first step, now I am doing the second one. I want to make ajax form validation, but it gives the error right away opening the page and the error is at the top of page
Also pressing submit button it gives no errors despite empty fields.
Here is my view:
<div id="messages"></div>
<?php $attributes = array('class' => 'rex-forms', 'name' => 'continueregistrationform', 'id' => 'continueregistrationform'); ?>
<?= form_open_multipart('user/continueregistration', $attributes); ?>
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user" aria-hidden="true"></i></span>
<input id="name" type="text" class="form-control" name="name" placeholder="Name" value="<?= $instructors['name']; ?>">
</div><br>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-globe" aria-hidden="true"></i></span>
<input id="web" type="text" class="form-control" name="web" placeholder="Web-site" value="<?= $instructors['web']; ?>">
</div><br>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input id="tel" type="text" class="form-control" name="tel" placeholder="Phone" value="<?= $instructors['phone']; ?>">
</div><br>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input id="address" type="text" class="form-control" name="address" placeholder="Address" value="<?= $instructors['address']; ?>">
</div><br>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-facebook-square" aria-hidden="true"></i></span>
<input id="facebook" type="text" class="form-control" name="facebook" placeholder="Facebook" value="<?= $instructors['fb']; ?>">
</div><br>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-twitter-square" aria-hidden="true"></i></span>
<input id="twitter" type="text" class="form-control" name="twitter" placeholder="Twitter" value="<?= $instructors['twitter']; ?>">
</div><br>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-youtube-square" aria-hidden="true"></i></span>
<input id="youtube" type="text" class="form-control" name="youtube" placeholder="Youtube" value="<?= $instructors['youtube']; ?>">
</div><br>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-instagram" aria-hidden="true"></i></span>
<input id="instagram" type="text" class="form-control" name="instagram" placeholder="Instagram" value="<?= $instructors['instagram']; ?>">
</div><br>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="col-md-12 input-group" id="textareadescp">
<textarea name="insdescription" class="form-control" rows="5" id="profiledesc" placeholder="Description"><?= $instructors['description']; ?></textarea>
</div><br><br>
</div>
<!-- <script>
CKEDITOR.replace('profiledesc');
</script> -->
</div>
<div class="row">
<div class="col-md-8 col-sm-12">
</div>
<div class="col-md-4">
<div class="modal-footer btncolor">
<button type="submit" name="submit" id="submit" class="rex-bottom-medium rex-btn-icon">
<span class="rex-btn-text">Submit</span>
<span class="rex-btn-text-icon"><i class="fa fa-arrow-circle-o-right"></i></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Here is my controller:
function continueregistration() {
//set validation rules
$validator = array('success' => false, 'messages' => array());
$validate_data = array(
array(
'field' => 'name',
'label' => 'name',
'rules' => 'trim|required|min_length[2]|max_length[30]'
),
array(
'field' => 'web',
'label' => 'web adress',
'rules' => 'trim|required|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'facebook',
'label' => 'facebook adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'twitter',
'label' => 'twitter adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'twitter',
'label' => 'twitter adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'youtube',
'label' => 'youtube adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'instagram',
'label' => 'instagram adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'tel',
'label' => 'telephone number',
'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]|max_length[30]'
),
array(
'field' => 'address',
'label' => 'adress',
'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]|max_length[30]'
),
array(
'field' => 'insdescription',
'label' => 'description',
'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]'
)
);
$this->form_validation->set_rules($validate_data);
$this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>');
$data['title'] = 'Continue Registration';
$data['instructors'] = $this->user_model->getuserinfoforreg();
$this->load->view('templates/header');
$this->load->view('registration/registration', $data);
$this->load->view('templates/footer');
//validate form input
if ($this->form_validation->run() === FALSE)
{
// fails
$validator['success'] = false;
foreach ($_POST as $key => $value) {
$validator['messages'][$key] = form_error($key);
}
}
else
{
//insert the user registration details into database
$data = array(
'name' => $this->input->post('name'),
'web' => $this->input->post('web'),
'fb' => $this->input->post('facebook'),
'twitter' => $this->input->post('twitter'),
'youtube' => $this->input->post('youtube'),
'instagram' => $this->input->post('instagram'),
'phone' => $this->input->post('tel'),
'address' => $this->input->post('address'),
'description' => $this->input->post('insdescription')
);
$id = $this->session->userdata('id');
// insert form data into database
if ($this->user_model->updateUser($id, $data)) {
$validator['success'] = true;
$validator['messages'] = array();
}
else
{
// error
$validator['success'] = false;
$validator['messages'] = '<div class="alert alert-danger text-center">Error</div>';
}
}
echo json_encode($validator);
}
here is ajax form:
$(document).ready(function() {
$("#continueregistrationform").unbind('submit').bind('submit', function() {
var form = $(this);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
dataType: 'json',
success:function(response) {
console.log(response);
if(response.success) {
$("#messages").html(response.messages);
$("#continueregistrationform")[0].reset();
$(".text-danger").remove();
$(".form-group").removeClass('has-error').removeClass('has-success');
}
else {
$.each(response.messages, function(index, value) {
$("#messages").html(response.messages);
var element = $("#"+index);
$(element)
.closest('.form-group')
.removeClass('has-error')
.removeClass('has-success')
.addClass(value.length > 0 ? 'has-error' : 'has-success')
.find('.text-danger').remove();
$(element).after(value);
});
}
} // /success
}); // /ajax
return false;
});
});
Try this load view on different function then have seperate function for submit form. Show us your model also
<?php
class User extends CI_Controller {
class function continueregistration() {
$data['title'] = 'Continue Registration';
$data['instructors'] = $this->user_model->getuserinfoforreg();
$this->load->view('templates/header');
$this->load->view('registration/registration', $data);
$this->load->view('templates/footer');
}
public function submit()
{
$json = array();
$validate_data = array(
array(
'field' => 'name',
'label' => 'name',
'rules' => 'trim|required|min_length[2]|max_length[30]'
),
array(
'field' => 'web',
'label' => 'web adress',
'rules' => 'trim|required|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'facebook',
'label' => 'facebook adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'twitter',
'label' => 'twitter adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'twitter',
'label' => 'twitter adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'youtube',
'label' => 'youtube adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'instagram',
'label' => 'instagram adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'tel',
'label' => 'telephone number',
'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]|max_length[30]'
),
array(
'field' => 'address',
'label' => 'adress',
'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]|max_length[30]'
),
array(
'field' => 'insdescription',
'label' => 'description',
'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]'
)
);
$this->form_validation->set_rules($validate_data);
$this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>');
if ($this->form_validation->run() == FALSE)
{
foreach ($_POST as $key => $value) {
$json['messages'][$key] = form_error($key);
}
} else {
//insert the user registration details into database
$data = array(
'name' => $this->input->post('name'),
'web' => $this->input->post('web'),
'fb' => $this->input->post('facebook'),
'twitter' => $this->input->post('twitter'),
'youtube' => $this->input->post('youtube'),
'instagram' => $this->input->post('instagram'),
'phone' => $this->input->post('tel'),
'address' => $this->input->post('address'),
'description' => $this->input->post('insdescription')
);
// This does not set sessions only gets it.
$update_user = $this->user_model->updateUser($this->session->userdata('id'), $data)
if ($update_user)) {
$json['success'] = true;
} else {
$json['messages'] = '<div class="alert alert-danger text-center">Error</div>';
}
}
echo json_encode($json);
}
}
Ajax
$(document).ready(function() {
$("#submit").on('click', function() {
$.ajax({
url: "<?php echo base_url('user/submit');?>",
type: "POST",
data: $("#continueregistrationform").serialize(),
dataType: 'json',
success:function(response) {
console.log(response);
if(response.success) {
$("#messages").html(response.messages);
$("#continueregistrationform")[0].reset();
$(".text-danger").remove();
$(".form-group").removeClass('has-error').removeClass('has-success');
}
else {
$.each(response.messages, function(index, value) {
$("#messages").html(response.messages);
var element = $("#"+index);
$(element)
.closest('.form-group')
.removeClass('has-error')
.removeClass('has-success')
.addClass(value.length > 0 ? 'has-error' : 'has-success')
.find('.text-danger').remove();
$(element).after(value);
});
}
} // /success
}); // /ajax
return false;
});
});
View
<?php $attributes = array('class' => 'rex-forms', 'id' => 'continueregistrationform'); ?>
<?php echo form_open_multipart('user/submit', $attributes); ?>
<?php echo form_close();?>
1st you check ajax set or not also set the page header to json
you don't need to create another controller
function continueregistration() {
if(is_ajax_request()){
//set validation rules
$validator = array('success' => false, 'messages' => array());
$validate_data = array(
array(
'field' => 'name',
'label' => 'name',
'rules' => 'trim|required|min_length[2]|max_length[30]'
),
array(
'field' => 'web',
'label' => 'web adress',
'rules' => 'trim|required|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'facebook',
'label' => 'facebook adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'twitter',
'label' => 'twitter adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'twitter',
'label' => 'twitter adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'youtube',
'label' => 'youtube adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'instagram',
'label' => 'instagram adress',
'rules' => 'trim|valid_url|prep_url|min_length[3]'
),
array(
'field' => 'tel',
'label' => 'telephone number',
'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]|max_length[30]'
),
array(
'field' => 'address',
'label' => 'adress',
'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]|max_length[30]'
),
array(
'field' => 'insdescription',
'label' => 'description',
'rules' => 'trim|required|alpha_numeric_spaces|min_length[3]'
)
);
$this->form_validation->set_rules($validate_data);
$this->form_validation->set_error_delimiters('<p class="text-danger">', '</p>');
//validate form input
if ($this->form_validation->run() === FALSE)
{
// fails
$validator['success'] = false;
foreach ($_POST as $key => $value) {
$validator['messages'][$key] = form_error($key);
}
}
else
{
//insert the user registration details into database
$data = array(
'name' => $this->input->post('name'),
'web' => $this->input->post('web'),
'fb' => $this->input->post('facebook'),
'twitter' => $this->input->post('twitter'),
'youtube' => $this->input->post('youtube'),
'instagram' => $this->input->post('instagram'),
'phone' => $this->input->post('tel'),
'address' => $this->input->post('address'),
'description' => $this->input->post('insdescription')
);
$id = $this->session->userdata('id');
// insert form data into database
if ($this->user_model->updateUser($id, $data)) {
$validator['success'] = true;
$validator['messages'] = array();
}
else
{
// error
$validator['success'] = false;
$validator['messages'] = '<div class="alert alert-danger text-center">Error</div>';
}
}
//set header
$this->output
->set_content_type('application/json')
->set_output(json_encode($validator));
}
$data['title'] = 'Continue Registration';
$data['instructors'] = $this->user_model->getuserinfoforreg();
$this->load->view('templates/header');
$this->load->view('registration/registration', $data);
$this->load->view('templates/footer');
}
I got a new theme for which i need to edit my decorators.
Most of it i got working except for the checkbox and radio.
<!-- Previously -->
<div class="form-group ">
<label for="mobileTheme" class="col-lg-2 control-label optional">Mobiel thema</label>
<div class="col-lg-5">
<div class="checkbox">
<input type="hidden" name="mobileTheme" value="0" />
<input type="checkbox" name="mobileTheme" id="mobileTheme" value="1" class=" " />
</div>
<span class="help-block">Redirect mobiele gebruikers naar een eigen domein met eigen thema</span>
</div>
</div>
<!-- After -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<i class="input-helper"></i>
Remember me
</label>
</div>
</div>
</div>
My decorator looks like this now:
'checkbox' => array(
'decorators' => array(
'ViewHelper',
array(array('input' => 'HtmlTag'), array('tag' => 'div', 'class' => 'checkbox')),
array('Errors', array('class' => 'help-inline')),
array('Description', array('tag' => 'span', 'class' => 'help-block')),
array('Label', array('class' => 'col-lg-2 control-label')),
array('HtmlTag', array('tag' => 'div', 'class' => 'col-lg-5')),
'ElementWrapper'
),
'options' => array(
'class' => '',
),
),
The issue i'm struggling with is that i don't know how to order the decorators right so that label is now within the col-*-* class
I got it working,
'checkbox' => array(
'decorators' => array(
'ViewHelper',
array('AdditionalElement', array('placement' => 'APPEND', 'tag' => 'i', 'class' => 'input-helper')),
array(array('input' => 'HtmlTag'), array('tag' => 'div', 'class' => 'checkbox')),
array('Errors', array('class' => 'help-inline')),
array('Description', array('tag' => 'span', 'class' => 'help-block')),
array('HtmlTag', array('tag' => 'div', 'class' => 'col-lg-5')),
array('Label', array('class' => 'col-lg-2 control-label')),
'ElementWrapper'
),
'options' => array(
'class' => '',
),
),
AdditionalElement is my own custom class for implementing any piece of html.
I want to set span before input type file. Here is my existing code.
<?= $this->Form->input('logo', ['onchange'=>'onFileImage(this);',
'label' => false,
'type' => 'file',
'class'=>'']);?>
<lable class="inva_img"></lable>
I want the output to resemble the code below.
<span class="btn btn-default btn-file">
<span>Choose file</span>
<input type="file" name="logo" id="logo" onchange="onFileImage(this);" />
</span>
You can do it by below code
<?php
echo $this->Form->input('logo', [
'templates' => [
'inputContainer' => '<span class="input file required btn btn-default input {{type}}{{required}}"><span>Choose file</span>{{content}}</span>',
],
'onchange'=>'onFileImage(this);',
'class' => 'form-control',
'type' => 'file',
'label' => false
]);
?>
For details please see ndm ans.
<span class="btn btn-default btn-file">
<span>Choose file</span>
<input type="file" name="logo" id="logo" onchange="onFileImage(this);" />
</span>
Just replace <input> tag field with cakephp standard keeping others code unchanged. Here is the conversion:
<span class="btn btn-default btn-file">
<span>Choose file</span>
<?php
echo $this->Form->input(
'logo', array(
'id' => 'logo',
'type' => 'file',
'onchange' => 'onFileImage(this);'
)
);
?>
</span>
try the before/after options
echo $this->Form->input('field_name', array(
'before' => '-before-',
'after' => '-after-',
'between' => '-between-'
));
read more of this in cakephp book.
try this for cakephp2:
<?php
$this->Form->input('logo', ['onchange'=>'onFileImage(this);',
'label' => false,
'before' => '<span class="btn btn-default btn-file"><span>Choose file</span>',
'after' => '</span>',
'type' => 'file',
'class'=>'']);
I hope that there is similar concept for cakephp3
HTH.
CakePHP's FormHelper is how you generate forms when making CakePHP applications. As one might assume, this includes generating input elements, like so:
$this->Form->input('abc');
Which will produce HTML something like this:
<div class="input text">
<label for="ModelAbc">Abc</label>
<input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
</div>
Now, sadly, Bootstrap wants something like the following:
<div class="control-group">
<label for="ModelAbc" class="control-label">Abc</label>
<div class="controls">
<input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
</div>
</div>
How do I make CakePHP produce this output?
Inspired by lericson's answer, this is my final solution for CakePHP 2.x:
<?php echo $this->Form->create('ModelName', array(
'class' => 'form-horizontal',
'inputDefaults' => array(
'format' => array('before', 'label', 'between', 'input', 'error', 'after'),
'div' => array('class' => 'control-group'),
'label' => array('class' => 'control-label'),
'between' => '<div class="controls">',
'after' => '</div>',
'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-inline')),
)));?>
<fieldset>
<?php echo $this->Form->input('Fieldname', array(
'label' => array('class' => 'control-label'), // the preset in Form->create() doesn't work for me
)); ?>
</fieldset>
<?php echo $this->Form->end();?>
Which produces:
<form...>
<fieldset>
<div class="control-group required error">
<label for="Fieldname" class="control-label">Fieldname</label>
<div class="controls">
<input name="data[Fieldname]" class="form-error" maxlength="255" type="text" value="" id="Fieldname"/>
<span class="help-inline">Error message</span>
</div>
</div>
</fieldset>
</form>
I basically added the 'format' and 'error' keys, and added the control-label class to the label element.
Here's a solution for Bootstrap 3
<?php echo $this->Form->create('User', array(
'class' => 'form-horizontal',
'role' => 'form',
'inputDefaults' => array(
'format' => array('before', 'label', 'between', 'input', 'error', 'after'),
'div' => array('class' => 'form-group'),
'class' => array('form-control'),
'label' => array('class' => 'col-lg-2 control-label'),
'between' => '<div class="col-lg-3">',
'after' => '</div>',
'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-inline')),
))); ?>
<fieldset>
<legend><?php echo __('Username and password'); ?></legend>
<?php echo $this->Form->input('username'); ?>
<?php echo $this->Form->input('password'); ?>
</fieldset>
<?php echo $this->Form->end(__('Login')); ?>
In case a field needs its own label:
<?php echo $this->Form->input('username', array('label' => array('text' => 'Your username', 'class' => 'col-lg-2 control-label'))); ?>
Here's one way:
<?php echo $this->Form->create(null, array(
'inputDefaults' => array(
'div' => array('class' => 'control-group'),
'label' => array('class' => 'control-label'),
'between' => '<div class="controls">',
'after' => '</div>',
'class' => '')
)); ?>
Your answer is correct, but for the benefit of other users there's some other tweaks you can do to take advantage of the error/help text:
Add form-horizontal to class in the Form->create() for more compact forms (labels on the left of the input, rather than on top)
Here's how to put help text underneath a field (has to be done for each field), not forgetting to close the </div>.
echo $this->Form->input('field_name', array(
'after'=>'<span class="help-block">This text appears
underneath the input.</span></div>'));
and to correctly display errors:
// cake 2.0
echo $this->Form->input('abc', array(
'error' => array('attributes' => array('class' => 'controls help-block'))
));
Outputs:
<div class="control-group required error">
<label for="ModelAbc" class="control-label">Abc</label>
<div class="controls">
<input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
</div>
<!-- error message -->
<div class="controls help-block">This is the error validation message.</div>
<!-- error message -->
</div>
It's extra mark-up and not as neat as bootstrap but it's a quick fix. The alternative is to do each error message individually.
and it lines up nicely. I haven't discovered an easy way to make use of inline messages yet however.
Applying the same principle as above to the form->end function as follows:
<?php echo $this->Form->end(array(
'label' => __('Submit'),
'class' => 'btn',
'div' => array(
'class' => 'control-group',
),
'before' => '<div class="controls">',
'after' => '</div>'
));?>
To produce:
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value="Submit">
</div>
</div>
small add for another comments:
if you whant add class and change label base text, you can write next
<?php echo $this->Form->input('Fieldname', array(
'label' => array('class' => 'control-label','text'=>'HERE YOU LABEL TEXT')
)); ?>
I had the same problem using slywalker / cakephp-plugin-boost_cake, I open a ticket and he had it fix in a few hours, he updated to 1,03 and told me to use it like this
<?php echo $this->Form->input('email', array(
'label' => array(
'text' => __('Email:'),
),
'beforeInput' => '<div class="input-append">',
'afterInput' => '<span class="add-on"><i class="icon-envelope"></i></span></div>'
)); ?>
I hope it helps some one else too
To get it working with a horizontal form in bootstrap with bootswatch I had to use:
echo $this->Form->create(
'User',
array(
'action' => 'add',
'admin' => 'false',
'class' => 'form-horizontal',
'inputDefaults' => array(
'format' => array( 'before', 'label', 'between',
'input', 'error', 'after' ),
'class' => 'form-control',
'div' => array( 'class' => 'form-group' ),
'label' => array( 'class' => 'col-lg-2 control-label' ),
'between' => '<div class="col-lg-10">',
'after' => '</div>',
'error' => array( 'attributes' => array( 'wrap' => 'span',
'class' => 'text-danger' ) ),
)
)
);
Then you can just use it as normal:
echo $this->Form->input( 'User.username' );
Luc Franken posted this link in his comment: http://github.com/slywalker/cakephp-plugin-boost_cake
It took me a while to notice it, so for those who are still looking for the simplest solution:
Simply add the CakePHP Bootstrap plugin from GitHub and let the helper do the job for you!
I need to wrap zend form error messages in custom html.
<div class="cerror" id="ID-error">
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" id="IDerror-msg">
%ZEND_FORM_ERROR_MESSAGE%
</div>
</div>
</div>
Now I get errors in format:
<ul>
<li>Error message</li>
</ul>
I need:
<div class="cerror" id="EMAIL-error">
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" id="EMAIL-error-msg">
<ul>
<li>Error message</li>
</ul>
</div>
</div>
</div>
Thank you!
I have following code:
$element->clearDecorators();
$element->removeDecorator('DtDdWrapper');
$element->addDecorator('ViewHelper');
$element->addDecorator('Description', array('tag' => 'p', 'class' => 'description'));
$element->addDecorator('Label', array('tag' => null));
$element->addDecorator(array('row' => 'HtmlTag'), array('tag' => 'div', 'class' => 'form-line'));
How to wrap errors in 3 div tags? Thank!
$element->clearDecorators();
$element->addDecorator('Errors');
$element->addDecorator(array('div1' => 'HtmlTag'), array('tag' => 'div',
'class' => 'cerror', 'id' => 'EMAIL-error'));
$element->addDecorator(array('div2' => 'HtmlTag'), array('tag' => 'div',
'class' => 'ui-widget'));
$element->addDecorator(array('div3' => 'HtmlTag'), array('tag' => 'div',
'class' => 'ui-state-error ui-corner-all',
'id' => 'EMAIL-error-msg'));
$element->addDecorator('ViewHelper');
$element->addDecorator('Description', array('tag' => 'p', 'class' => 'description'));
$element->addDecorator('Label', array('tag' => null));
$element->addDecorator(array('row' => 'HtmlTag'), array('tag' => 'div', 'class' => 'form-line'));