Ad

Bootstrap Form Validation Using Jquery

i'm trying to validate a form using jquery because i need to call the controller method only after the insertion of a second form. Previously i had an input of type submit and when i clicked it the result was the following alert: enter image description here

Now i changed the input to button type that displays a modal and i want to show the same alert when i click the button, i tried the following but it doesn't work:

$('#formContratto').validate({
            rules: {
                NumeroAutobus: {
                    required: true
                },
                Descrizione: {
                    required: true
                },
                DocContratto: {
                    required: true
                },
                NumeroAutorizzazione: {
                    required: true
                },
                DataScadenza: {
                    required: true
                },
                idAbbonamento: {
                    required: true
                }
            },
            highlight: function (element) {
                $(element).closest('.control-group').removeClass('success').addClass('error');
            },
            success: function (element) {
                element.text('OK!').addClass('valid')
                    .closest('.control-group').removeClass('error').addClass('Done');
            }   
        });

That's the input button:

<div class="col-sm-2"><input type="button" value="@Risorse.Language.InserisciAutorizzazione" class="btnRegister btn btn-default" data-toggle="modal" data-target="#modalLoginForm" onclick="submitform();" /></div>

And that's the script of the page:

    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();

            $('#formContratto').validate({
                rules: {
                    NumeroAutobus: {
                        required: true
                    },
                    Descrizione: {
                        required: true
                    },
                    DocContratto: {
                        required: true
                    },
                    NumeroAutorizzazione: {
                        required: true
                    },
                    DataScadenza: {
                        required: true
                    },
                    idAbbonamento: {
                        required: true
                    }
                },
                highlight: function (element) {
                    $(element).closest('.control-group').removeClass('success').addClass('error');
                },
                success: function (element) {
                    element.text('OK!').addClass('valid')
                        .closest('.control-group').removeClass('error').addClass('Done');
                }   
            });
        });

        $('#modalLoginForm').on('show.bs.modal', function (e) {
            var button = e.relatedTarget;
            if ($("#NumeroAutobus").val().length == 0
                || $("#Descrizione").val().length == 0
                || $("#DocContratto").val().length == 0
                || $("#NumeroAutorizzazione").val().length == 0
                || $("#DataScadenza").val().length == 0
                || $("#idAbbonamento").val().length == 0) {
                e.stopPropegation();
            }
        });

        function submitform() {
            debugger;
            var f = document.getElementsByTagName('form')[0];
            if (f.checkValidity()) {
                f.submit();
            }
        }
    </script>

Any ideas?

Thank you very much.

Ad

Answer

I solved this.

On the method where i display the modal i added the else statement as follows:

 $('#modalLoginForm').on('show.bs.modal', function (e) {
    var button = e.relatedTarget;
    if ($("#NumeroAutobus").val().length == 0
        || $("#Descrizione").val().length == 0
        || $("#DocContratto").val().length == 0
        || $("#NumeroAutorizzazione").val().length == 0
        || $("#DataScadenza").val().length == 0
        || $("#idAbbonamento").val().length == 0) {
        e.stopPropegation();
    }
    else {
        event.preventDefault();
    }
});

With preventDefault i avoided the call to the server and i open the modal correctly. Hope it'll helps someone.

Ad
source: stackoverflow.com
Ad