# Form-Validation in Frontend

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: ## 1 Answer It appears you are submitting the from without executing the validation. Using jQuery, you could listen for the form submit event, check validation and submit the form if it passes. At the top of your PHP file add the following to load the jQuery library: JHtml::_('jquery.framework');  Add the below JS to the page inside a script tag: (function($) {

\$(document).on('submit', '#save', function(e) {

if (task == "item.cancel" || document.formvalidator.isValid(document.getElementById("item-form")))
{
}

return false
});

}(jQuery));


This will listen for and intercept the form submit event. It will check for one of two conditions, if the the task is a cancel or if the document.formvalidator passes. If either condition is met it will submit the form. If neither condition is met, your form validation errors will appear and the form submission is cancelled by returning false from event handler callback.

• Thank you very much. I think there still is a small error because I'm getting some JS-errors in my console. I added them to my initial question. Would be glad if you could have a look at this. I'm not very familiar with jQuery, but I guess he does not know what "task" is... – MyFault May 6 '16 at 14:16
• @MyFault sorry, that was, er... my fault. You still need to load the jQuery JS library by adding it at the top of your PHP file. I updated my answer above with the new line. – Brian Bolli May 6 '16 at 14:18
• Hi Brian, thank you very much. I added the jQuery-Framework but I'm still getting the errors and the page is being submitted :-( – MyFault May 6 '16 at 14:31
• Can you check to see if those errors are in the console after the initial page load but before you submit the form? Also, what version of Joomla are you using? – Brian Bolli May 6 '16 at 15:25
• The error does only appear on submit-button-click. I'm using Joomla 3.5 – MyFault May 6 '16 at 20:46