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.

So, is it working but message look and feel is different? Or it is completely not working? — Mayank Patel
– Mayank Patel, Commented Jan 9, 2020 at 9:01
Is your form created by default on the page load or it is getting dynamically added after some events? — Mayank Patel
– Mayank Patel, Commented Jan 9, 2020 at 9:04
i edit the post with the script part of the page and the button code — Angelus
– Angelus, Commented Jan 9, 2020 at 9:07

Mayank Patel · Accepted Answer · 2020-01-09 09:37:03Z

1

In order to achieve this:

Your button needs to be set to type="submit"
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>

edited Jan 9, 2020 at 9:37

answered Jan 9, 2020 at 9:18

Mayank Patel

1,5811 gold badge14 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Angelus Over a year ago

Tried this. It validates correctly the form but when i click the save button, it opens the modal that i require but also launch the controller method. How can i solve it?

Mayank Patel Over a year ago

You mean how to perform server call?

Angelus Over a year ago

Nope, i have a form which is not in the modal. When i click the save button of this first form i need to validate the fields and then, to open the second form which is in the modal. I need to avoid that this first click perform the server call.

Mayank Patel Over a year ago

I have updated my answer. You can utilize submitHandler to prevent form from submitting the server call and take required actions.

Mayank Patel Over a year ago

So, you can use my for as default form on your page and then use submitHandler to open moadl for second form

|

Angelus · Accepted Answer · 2020-01-09 09:42:15Z

1

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.

answered Jan 9, 2020 at 9:42

Angelus

411 silver badge11 bronze badges

Collectives™ on Stack Overflow

Bootstrap form validation using jquery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related