Open modal only when form is validated
<p>I want to open a modal dialog box only when form is completely validated with no error. At first i have disabled my button so that it should validate first and it should be enable only when form is validated. I am using jquery validation for this but does not get the result which i want. I want when user click submit button if fields are not filled it should not open modal.
here is my HTML code</p>

<pre><code>                      &lt;div class="form-group"&gt;
                                &lt;div class="col-sm-4 col-sm-offset-2"&gt;
                                    &lt;button class="btn btn-white" type="reset"&gt;Cancel&lt;/button&gt;
                                     &lt;!-- Trigger the modal with a button --&gt;
                                    &lt;button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal"  disabled /&gt;Confirm&lt;/button&gt; 
                                &lt;/div&gt;
                      &lt;/div&gt;
</code></pre>

<p>and me jquery for this </p>

<pre><code>(function() {
$('#PasswordForm &gt; input').keyup(function() {

    var empty = false;
    $('#PasswordForm &gt; input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#myBtn').attr('disabled', 'disabled'); 
    } else {
        $('#myBtn').removeAttr('disabled'); 
    }
});})()
</code></pre>

<p>The form validation which i used is </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() 
{
    $('#PasswordForm').formValidation({
        message: 'This value is not valid',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: 
  {
            NPassword: 
   {
                validators: 
    {
                    notEmpty: 
     {
                        message: 'The password is required and can\'t be empty'
                    }
                }
            },
            RPassword: 
   {
                validators: 
    {
                    notEmpty: 
     {
                        message: 'The confirm password is required and can\'t be empty'
                    },
                    identical: 
     {
                        field: 'NPassword',
                        message: 'The password and its confirm are not the same'
                    }
                }
            }
        }
    });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="PasswordForm" method="post" class="form-horizontal" action="/HRM/HRM.PasswordChange"&gt;
           &lt;div class="hr-line-dashed"&gt;&lt;/div&gt;
                                &lt;div class="form-group"&gt;
        &lt;label class="col-sm-2 control-label"&gt;Employee Name&lt;/label&gt;
                                    &lt;div class="col-sm-10"&gt;
          &lt;input type="text" disabled="" value="@@UserName@@" class="form-control"&gt;
         &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="hr-line-dashed"&gt;&lt;/div&gt;
                                &lt;div class="form-group"&gt;
         &lt;label class="col-sm-2 control-label"&gt;New Password&lt;/label&gt;
                                    &lt;div class="col-sm-10"&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-md-6"&gt;
            &lt;input type="password"  name="NPassword" placeholder="New Password" class="form-control"&gt;
           &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="hr-line-dashed"&gt;&lt;/div&gt;
        &lt;div class="form-group"&gt;
         &lt;label class="col-sm-2 control-label"&gt;Retype Password&lt;/label&gt;
                                    &lt;div class="col-sm-10"&gt;
                                        &lt;div class="row"&gt;
                                            &lt;div class="col-md-6"&gt;
            &lt;input type="password" name="RPassword" placeholder="Retype Password" class="form-control"&gt;
           &lt;/div&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="hr-line-dashed"&gt;&lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;div class="col-sm-4 col-sm-offset-2"&gt;
                                        &lt;button class="btn btn-white" type="reset"&gt;Cancel&lt;/button&gt;
           &lt;!-- Trigger the modal with a button --&gt;
          &lt;button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal"  disabled /&gt;Confirm&lt;/button&gt; 
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>any suggestion or help would be appreciated.  </p>