1

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:

enter image description here

enter image description here

1 Answer 1

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.

6
  • 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, 2016 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. May 6, 2016 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, 2016 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? May 6, 2016 at 15:25
  • The error does only appear on submit-button-click. I'm using Joomla 3.5
    – MyFault
    May 6, 2016 at 20:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.