bootstrapValidator.js with jsf does not work

Question

My validation script using bootstrapValidator.js

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" />
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" />

    <script type="text/javascript">
        $ = jQuery;
        $(document).ready(function() {
            $('#formAgendaMedica').bootstrapValidator({
                live : 'disabled',
                fields : {
                    'formAgendaMedica:paciente_input' : {
                        validators : {
                            notEmpty : {
                                message : 'Informe o paciente'
                            }
                        }
                    },
                    'formAgendaMedica:progama_input' : {
                        validators : {
                            notEmpty : {
                                message : 'Informe o programa'
                            }
                        }
                    },
                    'formAgendaMedica:grupo_input' : {
                        validators : {
                            notEmpty : {
                                message : 'Informe o grupo'
                            }
                        }
                    },
                    'formAgendaMedica:atendimento_input' : {
                        validators : {
                            notEmpty : {
                                message : 'Informe o atendimento'
                            }
                        }
                    }
                }
            });
        });
    </script>

The scenario is as follows, I open my screen that has the form that I am validating with above script, however you can see that I am validating 4 fields that cannot be null.

First test:

Once I open the form give Submit to see if it is working, but in my DOM is rendered only patient_input and progama_input, until here worked perfectly if null it execute the script correctly.

But the other two fields are rendered when I fill in the progama_input field, done this when I will test if group and service is null lock the jsf does a redirect to the same page and still comes back with the following error in the console.

Notice in the image below that group is now accessible.

When I give Submit again to test group input null jsf redirects and returns this.

Answer 1

You can’t use it that way

$ = jQuery;

Replace all $ for Jquery, this generates conflicts with the lib primefaces, I know Jquery and Other JS say they can do what they did.

But it doesn’t work!

Use always Jquery instead of $, when I put libs . js in my projects I always get it right this way so it works.

Your Loader script also seems to be wrong: we use it like this here

<!-- para usar JQuery nos scripts -->
<h:outputScript library="primefaces" name="jquery/jquery.js" />
<h:outputScript library="primefaces" name="primefaces.js" />

Another detail inside the tag head view

Answer 2

Another way to avoid conflicts when using jQuery is to isolate its use within an IIF function. Example:

+function($){

//Insira todo seu código aqui    

}(jQuery);