[Form Validation] Errors on fields that don't have `rules` defined

[otavioserra]

Bug Report

I defined Form Validation rules programmatically in some fields, not in all fields. Some fields are only optional, and they always they trhown errors like this for all fields unmapped:

 Form: Field identifier undefined not found | overrideMethod | @ | installHook.js:1   | error | @ | semantic.min.js:11   | field | @ | semantic.min.js:11   | field | @ | semantic.min.js:11   | (anonymous) | @ | semantic.min.js:11   | each | @ | jquery.min.js:2   | each | @ | jquery.min.js:2   | isValid | @ | semantic.min.js:11   | form | @ | semantic.min.js:11   | dispatch | @ | jquery.min.js:2   | v.handle | @ | jquery.min.js:2

The console starts to show a bunch of errors like this. These errors are soft errors because they don't impact the behavior of the collection Form, but for enoing clients, they can argue it is broken. So, if possible, please give me one option to solve this in one setting. I found that we can put data-validate="skip" in all fields, but for me, who has a lot of fields in the platform, it can be difficult.

Steps to reproduce

Defining programmatically Form Validation rules in some fields, not in all fields.

Expected result

Ignore fields aren't ruled mapped

Actual result

Throw errors for fields not ruled mapped

Testcase

N / A

Screenshot (if possible)

Version

2.9.4

[lubber-de]

Please provide a reproducable jsfiddle. Somewhere you probably have declared a field name which isn't found in your form. At least that's what the error tells you. It seems you are defining the field names somehow dynamically and one of them got undefined

[lubber-de]

Here is a jsfiddle which you can adjust to reproduce the issue, so we can investigate.

This Jsfiddle contains a form and a ruleset, but only for two of the form fields. All other fields don't have a rule set.
The console does not throw the error your are describing, so there is something different on your setup.

https://jsfiddle.net/lubber/463vksmz/3/

[otavioserra]

My application is huge, and I'll need a bunch of time to adapt my code to one mock at Jsfiddle. I'll do it ASAP and come back here to do it. But these errors didn't occur in the 2.9.2 version. When I upgrade to 2.9.4, this problem starts to occur & I didn't make any modifications in my application.

However, I did a simple test inside the controller $(.ui.form).form({...}) in my application to try to find if it is my application or the upgrade. I found that it isn't my application bug.

Here is my use case test:

I only open the form without any fields filled and clicked at submit button to force onFailure callback.

• You can find the code of the application here https://github.com/otavioserra/conn2flow/blob/main/gestor/assets/interface/interface.js#L208.
• My application test:

                $('.ui.form.interfaceFormPadrao')
			.form({
				fields: (gestor.interface.regrasValidacao ? gestor.interface.regrasValidacao : {}),
				onSuccess: function (event, fields) {
					// isn't used in this use case.
				},
				onFailure: function (formErrors, fields) {
					console.log('Form errors.', formErrors, fields);

					return false;
				}
			});

• Values from the custom rules used on gestor.interface.regrasValidacao:

"interface": {
        "regrasValidacao": {
            "nome": {
                "rules": [
                    {
                        "type": "notEmpty",
                        "prompt": "É obrigatório preencher o campo <b>Nome da Página<\/b>."
                    },
                    {
                        "type": "minLength[3]",
                        "prompt": "O campo <b>Nome da Página<\/b> deve ter no mínimo 3 caracteres."
                    },
                    {
                        "type": "maxLength[100]",
                        "prompt": "O campo <b>Nome da Página<\/b> deve ter no máximo 100 caracteres."
                    }
                ],
                "identifier": "pagina-nome"
            },
            "caminho": {
                "rules": [
                    {
                        "type": "notEmpty",
                        "prompt": "É obrigatório preencher o campo <b>Caminho<\/b>."
                    },
                    {
                        "type": "maxLength[100]",
                        "prompt": "O campo <b>Caminho<\/b> deve ter no máximo 100 caracteres."
                    },
                    {
                        "type": "regExp[\/^.*\\\/$\/gi]",
                        "prompt": "É necessário definir no campo <b>Caminho<\/b> os seguintes caracteres : <b>pelo menos uma '\/' no final<\/b>. Favor incluir os caracteres  e tentar novamente."
                    }
                ],
                "identifier": "paginaCaminho"
            },
            "layout": {
                "rules": [
                    {
                        "type": "notEmpty",
                        "prompt": "É obrigatório selecionar pelo menos uma opção do campo <b>Layout<\/b>."
                    }
                ],
                "identifier": "layout"
            },
            "tipo": {
                "rules": [
                    {
                        "type": "notEmpty",
                        "prompt": "É obrigatório selecionar pelo menos uma opção do campo <b>Tipo<\/b>."
                    }
                ],
                "identifier": "tipo"
            },
            "framework_css": {
                "rules": [
                    {
                        "type": "notEmpty",
                        "prompt": "É obrigatório selecionar pelo menos uma opção do campo <b>Framework CSS<\/b>."
                    }
                ],
                "identifier": "framework_css"
            }
        },
        "validarCampos": {
            "paginaCaminho": {
                "prompt": "Já existe cadastro do campo  <b>Caminho<\/b> com o mesmo valor preenchido. Favor escolher outro  <b>Caminho<\/b> e tentar novamente.",
                "campo": "caminho",
                "language": true
            }
        }
    }

Screenshots of the console

Conclusion

As you can see, the bug is occurring before my application deals with the return of any data, showing the problem is occurring inside Form Validation behavior.

But if you needed the jsfiddle, I'll do so, but I'll need more time.

[lubber-de]

I quickly took a look into your repository, trying to figure out your HTML layout, as the above mentions form rules for gestor.interface.regrasValidacao seem ok.

You are initializing the form for the selector .ui.form.interfaceFormPadrao which i can find at several places in your repo.

I believe, the form is initialized multiple times and at some specific situation without a valid identifier (perhaps via later dynamically added form rule or form field)

You may try to run your code with active debugging turned on to get a better idea what's going on. If your don't want to add debug: true, verbose:true to every instance of your code, you may simply override the setting globally before anything else via

$.fn.form.settings.debug = true;
$.fn.form.settings.verbose = true;

Please try this and also use the non minified version of semantic.js . You don't even need to click the submit button.

[otavioserra]

Verbosing mode

I made new test using the settings as you asked:

$.fn.form.settings.debug = true;
$.fn.form.settings.verbose = true;

Results

General results:

Detailed results:

New Installation

If you want you can install the platform by your own:

Prerequisites

• Web Server: Apache or Nginx with PHP support
• PHP: Version 8.0 or higher with required extensions (curl, zip, pdo_mysql, openssl)
• MySQL: Version 5.7 or higher (or MariaDB equivalent)
• Write Permissions: Web server must have write access to installation directory

Installation Steps: https://github.com/otavioserra/conn2flow?tab=readme-ov-file#installation-steps

HTML used

Only one .interfaceFormPadrao form founded on this page:

Here the <form> of the HTML (not all because it is a huge HTML) used in this use case en version but the name of fields are equal pt-br, only prompts are translated:

<form id="admin-paginas" action="/instalador/en/admin-paginas/adicionar/" method="post" name="admin-paginas" class="ui form interfaceFormPadrao error" enctype="multipart/form-data">
    <div id="_gestor-interface-insert-dados"><div class="field error">
    <label>Page Name</label>
    <input type="text" name="pagina-nome" placeholder="Page Name">
</div>
<div class="field error">
    <label>Path</label>
    <input type="text" name="paginaCaminho" placeholder="Path">
</div>
<div class="two fields">
    <div class="field error">
        <label id="_cc79f46a_formLabel">Layout</label>
        	<div class="ui search clearable dropdown selection"><select id="layout" name="layout" class="noselection">
		<option value="">Choose a layout</option>
		<option value="layout-pagina-padrao">Default Page Layout</option>
		<option value="layout-emails">Emails Layout</option>
		<option value="layout-iframes">Iframes Layout</option>
		<option value="layout-administrativo-do-gestor-3d">Layout Administrativo do Gestor 3D</option>
		<option value="layout-administrativo-do-gestor">Manager Administrative Layout</option>
		<option value="layout-pagina-sem-permissao">Page Without Permission Layout</option>
		<option value="layout-impressao">Print Layout</option>
		<option value="layout-pagina-simples">Simple Page Layout</option>
	</select><i class="dropdown icon"></i><i class="remove icon"></i><input class="search" autocomplete="fomantic-search" aria-labelledby="_cc79f46a_formLabel" tabindex="0"><div class="default text">Choose a layout</div><div class="menu" tabindex="-1"><div class="item" data-value="layout-pagina-padrao" data-text="Default Page Layout">Default Page Layout</div><div class="item" data-value="layout-emails" data-text="Emails Layout">Emails Layout</div><div class="item" data-value="layout-iframes" data-text="Iframes Layout">Iframes Layout</div><div class="item" data-value="layout-administrativo-do-gestor-3d" data-text="Layout Administrativo do Gestor 3D">Layout Administrativo do Gestor 3D</div><div class="item" data-value="layout-administrativo-do-gestor" data-text="Manager Administrative Layout">Manager Administrative Layout</div><div class="item" data-value="layout-pagina-sem-permissao" data-text="Page Without Permission Layout">Page Without Permission Layout</div><div class="item" data-value="layout-impressao" data-text="Print Layout">Print Layout</div><div class="item" data-value="layout-pagina-simples" data-text="Simple Page Layout">Simple Page Layout</div></div></div>
    </div>
    <div class="field">
        <label>Framework CSS</label>
        	<div class="ui dropdown frameworkCSS selection" tabindex="0"><select id="framework-css" name="framework_css">
		<option value="">Framework CSS</option>
		<option value="fomantic-ui">Fomantic-UI</option>
		<option value="tailwindcss" selected="">TailwindCSS</option>
	</select><i class="dropdown icon"></i><div class="text">TailwindCSS</div><div class="menu hidden transition" tabindex="-1"><div class="item" data-value="fomantic-ui" data-text="Fomantic-UI">Fomantic-UI</div><div class="item active selected" data-value="tailwindcss" data-text="TailwindCSS">TailwindCSS</div></div></div>
    </div>
</div>
<div class="two fields">
    <div class="field">
        <label>Type</label>
        	<div class="ui dropdown pagina-tipo selection" tabindex="0"><select id="type" name="tipo">
		<option value="">Select a type</option>
		<option value="sistema">System</option>
		<option value="pagina" selected="">Page</option>
	</select><i class="dropdown icon"></i><div class="text">Page</div><div class="menu hidden transition" tabindex="-1"><div class="item" data-value="sistema" data-text="System">System</div><div class="item active selected" data-value="pagina" data-text="Page">Page</div></div></div>
    </div>
    <!-- permissao-pagina < -->
    <div class="field">
        <label>No Permission / Public Access</label>
        <div class="ui toggle checkbox">
            <input type="checkbox" name="sem_permissao" data-checked="" tabindex="0" class="hidden">
            <label>&nbsp;</label>
        </div>
    </div><!-- permissao-pagina > -->
</div>
<div class="three fields hidden pagina-modulos-container">
    <div class="field">
        <label id="_c11764e4_formLabel">Module</label>
        	<div class="ui search clearable dropdown gestorModule selection"><select id="module" name="modulo" class="noselection">
		<option value="">Select a module</option>
		<option value="admin-categorias">Admin Categories</option>
		<option value="admin-componentes">Admin Components</option>
		<option value="admin-environment">Admin Environment</option>
		<option value="admin-arquivos">Admin Files</option>
		<option value="admin-ia">Admin IA</option>
		<option value="admin-layouts">Admin Layouts</option>
		<option value="admin-paginas">Admin Pages</option>
		<option value="admin-plugins">Admin Plugins</option>
		<option value="admin-prompts-ia">Admin Prompts AI</option>
		<option value="admin-templates">Admin Templates</option>
		<option value="admin-atualizacoes">Admin Updates</option>
		<option value="admin-modos-ia">AI Modes Admin</option>
		<option value="dashboard">Dashboard</option>
		<option value="modulos">Modules</option>
		<option value="modulos-grupos">Modules Groups</option>
		<option value="modulos-operacoes">Modules Operations</option>
		<option value="publisher">Publisher Definitions</option>
		<option value="publisher-pages">Publisher Pages</option>
		<option value="perfil-usuario">User Profile</option>
		<option value="usuarios">Users</option>
		<option value="usuarios-perfis">Users Profiles</option>
		<option value="variables">Variables</option>
	</select><i class="dropdown icon"></i><i class="remove icon"></i><input class="search" autocomplete="fomantic-search" aria-labelledby="_c11764e4_formLabel" tabindex="0"><div class="default text">Select a module</div><div class="menu hidden transition" tabindex="-1"><div class="item" data-value="admin-categorias" data-text="Admin Categories">Admin Categories</div><div class="item" data-value="admin-componentes" data-text="Admin Components">Admin Components</div><div class="item" data-value="admin-environment" data-text="Admin Environment">Admin Environment</div><div class="item" data-value="admin-arquivos" data-text="Admin Files">Admin Files</div><div class="item" data-value="admin-ia" data-text="Admin IA">Admin IA</div><div class="item" data-value="admin-layouts" data-text="Admin Layouts">Admin Layouts</div><div class="item" data-value="admin-paginas" data-text="Admin Pages">Admin Pages</div><div class="item" data-value="admin-plugins" data-text="Admin Plugins">Admin Plugins</div><div class="item" data-value="admin-prompts-ia" data-text="Admin Prompts AI">Admin Prompts AI</div><div class="item" data-value="admin-templates" data-text="Admin Templates">Admin Templates</div><div class="item" data-value="admin-atualizacoes" data-text="Admin Updates">Admin Updates</div><div class="item" data-value="admin-modos-ia" data-text="AI Modes Admin">AI Modes Admin</div><div class="item" data-value="dashboard" data-text="Dashboard">Dashboard</div><div class="item" data-value="modulos" data-text="Modules">Modules</div><div class="item" data-value="modulos-grupos" data-text="Modules Groups">Modules Groups</div><div class="item" data-value="modulos-operacoes" data-text="Modules Operations">Modules Operations</div><div class="item" data-value="publisher" data-text="Publisher Definitions">Publisher Definitions</div><div class="item" data-value="publisher-pages" data-text="Publisher Pages">Publisher Pages</div><div class="item" data-value="perfil-usuario" data-text="User Profile">User Profile</div><div class="item" data-value="usuarios" data-text="Users">Users</div><div class="item" data-value="usuarios-perfis" data-text="Users Profiles">Users Profiles</div><div class="item" data-value="variables" data-text="Variables">Variables</div></div></div>
    </div>
    <div class="field">
        <label>Option</label>
        <input type="text" name="pagina-opcao" placeholder="Option">
    </div>
    <div class="field">
        <label>Root of Module</label>
        <div class="ui toggle checkbox">
            <input type="checkbox" name="raiz" data-checked="" tabindex="0" class="hidden">
            <label>&nbsp;</label>
        </div>
    </div>
</div>
<!-- MORE A BUNCH OF HTML CODE WITH INPUTS THAT WASN'T RULED -->
    <input id="_gestor-adicionar" name="_gestor-adicionar" type="hidden" value="1">
    <input id="opcao" name="opcao" type="hidden" value="adicionar">
    <div class="ui error message"><ul class="list"><li>It is mandatory to fill in the field <b>Page Name</b>.</li><li>The field <b>Page Name</b> must have at least 3 characters.</li><li>It is mandatory to fill in the field <b>Path</b>.</li><li>It is necessary to define the following characters in the field <b>Path</b>: <b>at least one '/' at the end</b>. Please include the characters and try again.</li><li>It is mandatory to select at least one option from the field <b>Layout</b>.</li></ul></div>
    <div class="ui center aligned basic segment">
        <!-- botao-padrao < -->
        <button id="_gestor-interface-insert-button" data-tooltip="Click this button to SAVE the changes." data-position="right center" data-inverted="" class="positive ui button">
            Send
        </button><!-- botao-padrao > -->
    </div>
</form>

[lubber-de]

Thanks. Could you please provide the full array content whenever "Finding field with identifier" is shown in the debug table? (not just screenshots without expanding the array content)

For example in such situations:

the array content will probably show "undefined". Those are the lines we need to take a closer look.

Please understand i cannot rebuild and setup your whole application and setup databases and debug your whole code :)
A simple reproducable jsfiddle would still be easier to investigate.

[lubber-de]

btw: I updated the jsfiddle with your given form, your given js form init and the example response json containing your rules.
The error messages are still not shown, so i cannot reproduce the issue.
https://jsfiddle.net/lubber/463vksmz/6/