Form-Validation in Frontend

Question

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:

Answer 1

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")))
         {
             Joomla.submitform(task, 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.