I'm trying to get my component ready for frontend-action. There are some forms that are filled by the user - but of course I have some fields that need specific values (int
, float
, ...) and some fields must not be empty.
To achieve that I tried to build a form like that:
<?xml version="1.0" encoding="utf-8"?>
<form>
<fields name = "user">
<fieldset name = "personal">
<field name = "gender"
type = "list"
class = "form-control"
label = "COM_BESTIA_FIELDS_GENDER_LABEL"
description = "COM_BESTIA_FIELDS_GENDER_DESC"
filter = "safehtml"
required = "true"
default = "">
<option value = "">COM_BESTIA_FIELDS_VALUES_GENDERUNKNOWN</option>
<option value = "f">COM_BESTIA_FIELDS_VALUES_GENDERFEMALE</option>
<option value = "m">COM_BESTIA_FIELDS_VALUES_GENDERMALE</option>
</field>
<field name = "firstname"
type = "text"
class = "inputbox form-control"
size = "40"
label = "COM_BESTIA_FIELDS_FIRSTNAME_LABEL"
description = "COM_BESTIA_FIELDS_FIRSTNAME_DESC"
required = "true"
filter = "safehtml" />
<field name = "dateofbirth"
type = "calendar"
class = "inputbox form-control"
default = "NOW - 18 years"
label = "COM_BESTIA_FIELDS_DATEOFBIRTH_LABEL"
description = "COM_BESTIA_FIELDS_DATEOFBIRTH_DESC"
required = "true"
format = "%d.%m.%Y"
filter = "safehtml" />
</fieldset>
<fieldset name = "contact">
<field name = "city"
type = "text"
class = "inputbox form-control"
size = "40"
label = "COM_BESTIA_FIELDS_CITY_LABEL"
description = "COM_BESTIA_FIELDS_CITY_DESC"
required = "true"
filter = "safehtml" />
<field name = "zip"
type = "text"
class = "inputbox form-control"
size = "40"
label = "COM_BESTIA_FIELDS_ZIP_LABEL"
description = "COM_BESTIA_FIELDS_ZIP_DESC"
required = "true"
filter = "integer" />
<field name = "country"
type = "list"
class = "form-control"
label = "COM_BESTIA_FIELDS_COUNTRY_LABEL"
description = "COM_BESTIA_FIELDS_COUNTRY_DESC"
required = "true"
filter = "safehtml">
<option value = "DE">COM_BESTIA_FIELDS_VALUES_COUNTRYDE</option>
</field>
</fieldset>
</fields>
</form>
Now I'm rendering the fields in my frontend-view:
JHtml::_('behavior.formvalidator');
<form id="save" class="form-validate" action="<?php echo JRoute::_('index.php?option=com_bestia'); ?>" method="post" >
...
<?php echo $this->form->renderFieldset('personal'); ?>
<?php echo $this->form->renderFieldset('contact'); ?>
...
<?php echo JHtml::_( 'form.token' ); ?>
<input type="hidden" name="id" value="<?php echo $this->item->id; ?>" />
<input type="hidden" name="task" value="item.save" />
<button type="submit" class="btn validate">
<?php echo JText::_('COM_BESTIA_SUBMIT', true); ?>
</button>
</form>
Okay, that works fine - all inputs are available in the controller where I can work with them. But unfortunately I can submit the form even if I leave the required fields empty.
What did I miss? I think I followed the Joomla!-Documentation but something must be wrong...
Any help is very welcome!
Edits:
Based on your recommendations I added
<script>
(function($) {
$(document).on('submit', '#item-form', function(e) {
if (task == "item.cancel" || document.formvalidator.isValid(document.getElementById("item-form")))
{
Joomla.submitform(task, document.getElementById("item-form"));
}
return false
});
}(jQuery));
</script>
But now I'm getting the following errors: