javascript - Only show modal after validation check and form has been submitted - Stack Overflow

admin管理员组

文章数量:1399903

There are quite a few examples out there at the moment and i have not been able to get this to work. I am trying to load my modal only once my form has passed simple validation and has been submitted. Right now it just loads the modal when i click submit, even if it fails validation.

For example below, the checkbox is a required field, if i don't check it and click submit the validation error loads, but so does the modal.

<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)">
        <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br>
        <button type="submit" value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <input type="submit" value="Submit" />
</form>

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

I found an example online that uses Jquery and it works well, but it does not load a modal.

<form method="post" action="" onsubmit="return muModal(this)">

    <input type="checkbox" name="vehicle" value="Accept" required>Accept<br>

    <input type="submit" value="Submit" />
</form>

<script>
    function muModal(f)
    {
        var form=f,
            modal=$('<div/>', {
                'id':'alert',
                'html':'<iframe src=""></iframe>'
            })
                .dialog({
                    'modal':true,
                    'width':800,
                    'height':'auto',
                    'buttons': {
                        'OK': function() {
                            $(this).dialog( "close" );
                            // do something, maybe call form.submit();
                        }
                    }
                });
        return false;
    }
</script>

Please note that the form still needs to submit, i just want the modal to pop up while the submission is happening.

There are quite a few examples out there at the moment and i have not been able to get this to work. I am trying to load my modal only once my form has passed simple validation and has been submitted. Right now it just loads the modal when i click submit, even if it fails validation.

For example below, the checkbox is a required field, if i don't check it and click submit the validation error loads, but so does the modal.

<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)">
        <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br>
        <button type="submit" value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <input type="submit" value="Submit" />
</form>

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

I found an example online that uses Jquery and it works well, but it does not load a modal.

<form method="post" action="" onsubmit="return muModal(this)">

    <input type="checkbox" name="vehicle" value="Accept" required>Accept<br>

    <input type="submit" value="Submit" />
</form>

<script>
    function muModal(f)
    {
        var form=f,
            modal=$('<div/>', {
                'id':'alert',
                'html':'<iframe src="http://test./preloader"></iframe>'
            })
                .dialog({
                    'modal':true,
                    'width':800,
                    'height':'auto',
                    'buttons': {
                        'OK': function() {
                            $(this).dialog( "close" );
                            // do something, maybe call form.submit();
                        }
                    }
                });
        return false;
    }
</script>

Please note that the form still needs to submit, i just want the modal to pop up while the submission is happening.

• javascript
• jquery
• bootstrap-modal

Share Improve this question Follow edited Oct 19, 2017 at 12:55 xTRIFAC70Rx asked Oct 19, 2017 at 9:12 xTRIFAC70RxxTRIFAC70Rx 40722 gold badges55 silver badges1717 bronze badges 2

• Where is your validation code? – ProEvilz Commented Oct 19, 2017 at 9:20
• @ProEvilz , Thanks for the response, like i said it is simple. I just used required field in the checkbox. – xTRIFAC70Rx Commented Oct 19, 2017 at 9:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I had the same problem and here is what I did which seems to work. Instead of a single button of type "submit" that opens the modal, create two buttons:

1st button: type "button", triggers the form validation. If the form is validated, triggers the click of the 2nd button

2nd button: type "submit" and hidden. This is the button that will open the modal.

<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)">
    <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br>

    <!-- button with onclick event that triggers the form validation. If the form is valid, triggers click of second button -->
    <button type="button" value="buttonValue" class="btn btn-info btn-lg" onclick="if(formIsValid() $('#triggerModal').click();)">button name</button>

    <!-- hidden submit button -->
    <button type="submit" id="triggerModal" hidden value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"></button>  

</form>

I think this is what you want as I understand it?

$('#myForm').on('submit', function(e) {
  
  e.preventDefault(); //stop submit
  
  if ($('#myCheck').is(':checked')) {
  //Check if checkbox is checked then show modal
    $('#myModal').modal('show');
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<form method="post" action="" data-toggle="modal" id="myForm">
  <input id="myCheck" type="checkbox" name="vehicle" value="Bike" required>I accept this<br>

  <input type="submit" value="Submit" />
</form>


<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

本文标签： javascriptOnly show modal after validation check and form has been submittedStack Overflow