I am using bootstrap with zend 2.
The content of the modal is retrieved through ajax call.
But the validation doesn't work at all, it submits without checking any field:
Here is where the modal loads:
<div class="modal fade" id="themesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Here is the modal content:
<div class="modal-body">
<div id="themesbox">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">title</div>
</div>
<div style="padding-top: 30px" class="panel-body">
<?php
$form = $this->form;
$form->setAttribute('action', $this->url('user/default', array('controller' => 'users', 'action' => 'create')));
$form->prepare();
echo $this->form()->openTag($form);
?>
<div id="mydiv"
style="display: none" class="alert alert-danger">
<p>Error:</p>
<span></span>
</div>
<div class="form-group">
<label for="name" class="col-md-3 control-label">user</label>
<div class="col-md-9">
<?php echo $this->formElement($form->get('name'));?>
</div>
</div>
<div class="form-group">
<label for="description" class="col-md-3 control-label">password</label>
<div class="col-md-9">
<?php echo $this->formElement($form->get('password'));?>
</div>
</div>
<div style="margin-top: 10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<?php echo $this->formSubmit($form->get('submit'));?>
<button id="cancel" class="btn btn-success" data-dismiss="modal">Cancel</button>
</div>
</div>
<?php echo $this->form()->closeTag();?>
</div>
<!-- /.panel-body -->
</div>
<!-- /. panel panel-info -->
</div>
</div>
Here is the jquery validation code:
$('.form-validation').each(function () {
$(this).validate({
errorElement: "span",
errorClass: "help-block",
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
$(element).attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
},
unhighlight: function(element) {
$(element).addClass('valid').closest('.control-group').removeClass('error').addClass('success');
$(element).attr('style', "border-radius: 4px; border:1px solid #ccc;");
},
errorPlacement: function (error, element) {
$(error).attr('style', "color: #FF0000;");
if ( element.prop('type') === 'checkbox') {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
});
And here is the form code:
$this->add(array(
'name' => 'name',
'attributes' => array(
'type' => 'text',
'id' => 'username',
'class' => 'form-control',
'required' => 'true',
'minlength' => '8',
'maxlength' => '20',
),
'options' => array(
'label' => 'name',
),
));
$this->add(array(
'name' => 'description',
'attributes' => array(
'type' => 'password',
'id' => 'password',
'class' => 'form-control',
'required' => 'true',
'minlength' => '8',
'maxlength' => '20',
),
'options' => array(
'label' => 'Password',
),
));