Правила проверки семантического интерфейса пользователя Программно и встроенная ошибка

Question

Я пытаюсь создать форму с помощью семантики пользовательского интерфейса,

Проверка формы теста Встроенный - семантический интерфейс пользователя

все отлично работает,

но если я делаю ошибки появляются сначала с установленным флажком, а затем с не установленным флажком и повторно отправляют форму, я остаюсь встроенными ошибками полей формы ... все работает, но надо снова увидеть встроенные ошибки .. .

Это проблема семантического интерфейса или я что-то забыл?

Спасибо за вашу помощь.

HTML:

    <div class="ui longer modal sch-cliente" style="border-top: 2px solid #2185D0 !important;">
    <i class="close icon"></i>
    <div class="header">
        <i class="user outline sign icon"></i> <span id="titolo-modale">Aggiungi Cliente</span>

    </div>
    <div class="scrolling content">
        <div class="ui hidden negative message" id="mod-cl-mess">
            <i class="close icon"></i>
            <div class="header" id="mod-cl-mess-hd">
            </div>
            <p id="mod-cl-mess-p"></p>
        </div>

        <form class="ui form form-clienti" id="FormCreaCliente" method="post">
            <h4 class="ui dividing header">Dati Cliente

            <div class="inline field" style="float:right;">
                <div class="ui slider checkbox">
                    <input id="privazzcheck" name="privazzcheck" type="checkbox" tabindex="0" class="hidden">
                    <label>Azienda</label>
                </div>
                <label></label>
            </div>

            </h4>
            <input type="hidden" id='azioneForm' name="azioneForm" value='inserisciCliente'>
            <input type="hidden" id='id_cliente' name="id_cliente" value=''>
            <div class="field">
                <label>Nominativo</label>
                <div class="three fields">
                    <!--PRIVATO-->
                    <div class="field cont-input-privato">
                        <div class="ui corner labeled input">
                            <input class='input-privato' type="text" id='nome' name="nome" placeholder="Nome">
                            <div class="ui corner label">
                                <i class="asterisk icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="field cont-input-privato">
                        <div class="ui corner labeled input">
                            <input class='input-privato' type="text" id='cognome' name="cognome" placeholder="Cognome">
                            <div class="ui corner label">
                                <i class="asterisk icon"></i>
                            </div>
                        </div>
                    </div>
                    <!--AZIENDA-->
                    <div class="field cont-input-azienda">
                        <div class="ui corner labeled input">
                            <input class='input-azienda disabled' type="text" id='ragsoc' name="ragsoc" placeholder="Ragione sociale">
                            <div class="ui corner label">
                                <i class="asterisk icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="field cont-input-azienda">
                        <div class="ui corner labeled input">
                            <input class='input-azienda disabled' type="text" id='piva' name="piva" placeholder="P.IVA">
                            <div class="ui corner label">
                                <i class="asterisk icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui corner labeled input">
                            <input type="text" id='cf' name="cf" placeholder="Codice Fiscale">
                            <div class="ui corner label">
                                <i class="asterisk icon"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            </form>
      </div>
      <div class="actions">
        <div class="ui deny button">Chiudi</div>
        <div class="ui approve button" onclick="">Salva</div>
    </div>
</div>
<div class="dt-buttons ui basic buttons"><button class="ui button" tabindex="0" aria-controls="myTable" type="button" onclick='apriModale()'><span><i class="plus icon"></i> Crea</span></button> </div>

JS:

function apriModale(){
$('#FormCreaCliente').form('reset');
                document.getElementById('azioneForm').value = 'inserisciCliente';
                document.getElementById('titolo-modale').innerHTML = 'Aggiungi Cliente';

                $('.ui.form.form-clienti').form('add rule', 
                    'nome', {
                        rules: [{
                        type: 'empty',
                        prompt: 'Inserisci un nome'
                            }, {
                        type: 'minLength[4]',
                        prompt: 'Inserisci minimo 4 lettere'
                            }]
                    }).form('add rule',
                    'cognome', {
                        rules: [{
                        type: 'empty',
                        prompt: 'Inserisci un cognome'
                            }, {
                        type: 'minLength[4]',
                        prompt: 'Inserisci minimo 4 lettere'
                        }]
                    }
                );

                $('.input-azienda').addClass('disabled');
                $('.input-privato').removeClass('disabled');
                $('.cont-input-azienda').hide();
                $('.cont-input-privato').show();
                $('.ui.longer.modal.sch-cliente').modal({
                        inverted: true,
                        //autofocus: true,
                        onApprove: function () {
                            var validated = 
 $('#FormCreaCliente').form('validate form');
                            return false;
                        },
                        onHide: function(){
                            $('.ui.checkbox').checkbox('set unchecked');

                            $('#mod-cl-mess').addClass("hidden");
                            $('#FormCreaCliente').form('reset');
                            console.log('hidden');
                        },
                    })
                    .modal('show');
}

 function formModale(tipo){
    if(tipo == 2){
        $('.ui.form.form-clienti').form('add rule', 
            'nome', {
                rules: [{
                type: 'empty',
                prompt: 'Inserisci un nome'
                    }, {
                type: 'minLength[4]',
                prompt: 'Inserisci minimo 4 lettere'
                    }]
            }).form('add rule',
            'cognome', {
                rules: [{
                type: 'empty',
                prompt: 'Inserisci un cognome'
                    }, {
                type: 'minLength[4]',
                prompt: 'Inserisci minimo 4 lettere'
                }]
            }
        );
        $('.ui.form.form-clienti').form('remove fields', ['ragsoc', 'piva']);
    }
    if(tipo == 1){
        $('.ui.form.form-clienti').form('add rule', 
            'ragsoc', {
                rules: [{
                type: 'empty',
                prompt: 'Inserisci una ragione sociale'
                    }, {
                type: 'minLength[4]',
                prompt: 'Inserisci minimo 4 lettere'
                    }]
            }).form('add rule',
           'piva', {
                rules: [{
                type: 'empty',
                prompt: 'Inserisci una partita iva'
                    }, {
                type: 'minLength[11]',
                prompt: 'Inserisci minimo 11 numeri'
                }]
            }
        );
        $('.ui.form.form-clienti').form('remove fields', ['nome', 'cognome']);
    }
}

    $('.ui.checkbox').checkbox({   
    onChecked: function(){
        formModale(1);

        $('.input-privato').addClass('disabled');
        $('.input-azienda').removeClass('disabled');
        $('.cont-input-privato').hide();
        $('.cont-input-azienda').show();
    },
    onUnchecked: function(){

        formModale(2);
        $('.input-azienda').addClass('disabled');
        $('.input-privato').removeClass('disabled');
        $('.cont-input-azienda').hide();
        $('.cont-input-privato').show();

    },
    });

    $('.ui.form.form-clienti').form({
    fields: {
        cf: {
            identifier: 'cf',
            rules: [{
                type: 'empty',
                prompt: 'Inserisci un codice fiscale'
                    }, {
                type: 'minLength[16]',
                prompt: 'Inserisci minimo 16 caratteri'
                    }]
        },
        tel: {
            identifier: 'tel',
            rules: [{
                type: 'empty',
                prompt: 'Inserisci un numero di telefono'
                    }, {
                type: 'minLength[9]',
                prompt: 'Inserisci minimo 9 numeri'
                    }, {
                type: 'number',
                prompt: 'Inserisci solo numeri'
                    }]
        }
    },
    inline: true,
    /*on: 'blur',*/
    transition: 'fade down',
    onSuccess: function (event, fields) {
     alert('ok!');
    }});