Action submitted in a form without validation

Question

I want to validate my form before sumit it, I used tooltips script to validate my form, but always the action sent to the controller in symfony despite the validation is incorrect. this is my code in twig

       <form id="rappel-form" class="form-horizontal" name="rappelform" method="post" enctype="multipart/form-data"
                                          action="{{ path('register') }}">

..............

/>

and in my script block, this is my code:

 <script>

      jQuery('#formulaire').ajaxForm({

        beforeSubmit: function (arr, $form, options) {


            if(! $form.valid()) return false;

            else return true;
        },

        success: function (data) {
            if(data.dataa!=null){
                alert(" succées");
            }
            else
                alert('erreur d éxécution de la requête');


        },
        error: function () {
            //jQuery('#main-content').html("erreur d'éxécution de la requête");
            alert('erreur d éxécution de la requête');

        }
    });
</script>

and in document.ready

 <script type="text/javascript">


    $(document).ready(function () {
        jQuery.validator.addMethod("regexphone", function (value, element, regexp) {

            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
            return this.optional(element) || regexp.test(value);
        }, "");
        $(document).ready(function () {
            $('#formulaire input[type="text"]').tooltipster({
                trigger: 'custom', // default is 'hover' which is no good here
                onlyOne: false,    // allow multiple tips to be open at a time
                position: 'right'  // display the tips to the right of the element
            });
            $('#formulaire input[type="password"]').tooltipster({
                trigger: 'custom', // default is 'hover' which is no good here
                onlyOne: false,    // allow multiple tips to be open at a time
                position: 'right'  // display the tips to the right of the element
            });
            $('#formulaire input[type="number"]').tooltipster({
                trigger: 'custom', // default is 'hover' which is no good here
                onlyOne: false,    // allow multiple tips to be open at a time
                position: 'right'  // display the tips to the right of the element
            });

            $('#formulaire').validate({ // initialize the plugin
                errorPlacement: function (error, element) {
                    $(element).tooltipster('update', $(error).text());
                    $(element).tooltipster('show');
                },
                success: function (label, element) {
                    $(element).tooltipster('hide');
                },
                rules: {
                    'contact[name]': {
                        required: true,
                        minlength: 2
                    },
                    'contact[gsmPrimary]': {
                        required: true,
                        'regexphone': /^0[1-9][0-9]{8}$/
                    },
                    'contact[lastName]': {
                        required: true,
                        minlength: 2
                    },
                    'contact[listcountry]': {
                        required: true,

                    }

                },
                messages: {

                    'contact[name]': {
                        required: "{{ 'message.contact.nom.required'|trans }}",
                        minlength: "{{ 'message.contact.nom.min'|trans }}",
                        maxlength: "Votre nom doit faire au plus 50 caractères."
                    },

                    'contact[gsmPrimary]': {
                        required: "{{ 'message.contact.telephone.required'|trans }}",
                        'regexphone': "{{ 'message.contact.telephone.validation'|trans }}"
                    },
                    'contact[lastName]': {
                        required: "{{ 'message.contact.prenom.required'|trans }}",
                        minlength: "{{ 'message.contact.prenom.min'|trans }}"
                    },
                    'contact[listcountry]': {
                        required: "{{ 'message.contact.country'|trans }}",

                    }

                },
                submitHandler: function (form) { // for demo
                    //alert('valid form submitted'); // for demo
                    return false; // for demo
                }
            });

        });
    });

</script>

the problem, the script validate the form and show me the errors but after that submit the form to the controller, and I got a great problems.

any idea please how to resolve the problem

Answer 1

The scripts listen to events attached to elements that are not there. Assuming that the code posted above is correct, you need to target the form you want to enhance properly.