Bootstrap form validation using jquery

Question

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:

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.

Answer 1

In order to achieve this:

1. Your button needs to be set to type="submit"
2. Your submit button should be present inside your form tag

Find the working fiddle below. If you don't want to put the form in the modal, you can just take your form out.

I have edited my fiddle. You can use submitHandler method to prevent form's default action by using e.preventDefault(); and handle your next actions.

 $(function() { $("#formContratto").validate({ rules: { NumeroAutobus: { required: true }, Descrizione: { required: true } }, messages: { NumeroAutobus: { required: "Please enter some data" }, Descrizione: { required: "Please provide some data" } }, submitHandler: function(form,e) { e.preventDefault(); alert('Form submitted'); return false; } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button> <div class="modal fade" id="addMyModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Add Stuff</h4> </div> <div class="modal-body"> <form role="form" id="formContratto"> <div class="form-group"> <label class="control-label col-md-3" for="email">First Field:</label> <div class="col-md-9"> <input type="text" class="form-control" id="NumeroAutobus" name="NumeroAutobus" placeholder="Enter first field" require/> </div> </div> <div class="form-group"> <label class="control-label col-md-3" for="email">Second Field:</label> <div class="col-md-9"> <input type="text" class="form-control" id="Descrizione" name="Descrizione" placeholder="Enter second field" require> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-success" id="btnSaveIt">Save</button> <button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button> </div> </form> </div> </div> </div> </div>

Answer 2

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.