フロントエンドでのフォーム検証
コンポーネントをフロントエンドアクション用に準備しようとしています。ユーザーが入力するフォームがいくつかありますが、特定の値が必要なフィールド（int、float、...）がいくつかあり、一部のフィールドは空であってはなりません。
それを達成するために、私はそのようなフォームを構築しようとしました：
<?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>
今私は私のフロントエンドビューでフィールドをレンダリングしています：
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>
さて、それはうまくいきます-私がそれらを扱うことができるコントローラーですべての入力が利用可能です。しかし、必要なフィールドを空のままにしても、残念ながらフォームを送信できます。
私は何を取りこぼしたか？私は Joomla！-Documentation に従っていたと思いますが、何かが間違っているに違いありません...
どんな助けでも大歓迎です！
編集：
追加したあなたの提案に基づいて
<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>
しかし、今私は次のエラーを受け取ります：
検証を実行せずにfromを送信しているようです。 jQueryを使用すると、フォーム送信イベントをリッスンし、検証をチェックして、合格した場合にフォームを送信できます。
PHPファイルの上部に次の行を追加して、jQueryライブラリをロードします。
JHtml::_('jquery.framework');
以下のJSをスクリプトタグ内のページに追加します。
(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));
これは、フォーム送信イベントをリッスンしてインターセプトします。タスクがキャンセルである場合、またはdocument.formvalidatorが合格した場合、2つの条件のいずれかをチェックします。いずれかの条件が満たされると、フォームが送信されます。どちらの条件も満たされない場合、フォーム検証エラーが表示され、イベントハンドラーコールバックからfalseを返すことでフォームの送信がキャンセルされます。