Bootstrap Modal在验证后不起作用，但是警报起作用

Question

I have a preview button in bootstrap 4. I want to show validation error if the form is not valid and show a modal window if the form is valid.

I have this code.

    $("#previewBtn").click(function(event) {
    //$("#exampleModal").modal("show");  //Works fine if I uncomment

    //Fetch form to apply custom Bootstrap validation
    var form = $("#order-form")
    //alert(form.prop('id')) //test to ensure calling form correctly

    if (form[0].checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    } else {
        //alert("Validated!");
        $("#exampleModal").modal("show");   
    }
    form.addClass('was-validated'); 
  }) //validation end

I get validation error if the form is not valid.

I get the modal window if I uncomment the second line to show the modal.

But the modal window is not working in the else if there is no errors in the validation.

The alert (above show modal) is working in the else if there is no errors in the validation.

How can I show the modal window if there is no validation errors?

Answer 1

in jQuery a simple way to show an element is to use .show() method

ex:

$("#exampleModal").show();

here you can find documentation about .show() http://api.jquery.com/show/

hope it helps

Answer 2

I'd check the value of your form variable. if it works in position 1 and not in the else then it leads me to think checkValidity() is either returning true or the if statement is throwing an exception.

And maybe add a ; to your var form line