Open modal only when form is validated

Question

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

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

and me jquery for this

(function() {
$('#PasswordForm > input').keyup(function() {

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

    if (empty) {
        $('#myBtn').attr('disabled', 'disabled'); 
    } else {
        $('#myBtn').removeAttr('disabled'); 
    }
});})()

The form validation which i used is

$(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'
                    }
                }
            }
        }
    });
});

<form id="PasswordForm" method="post" class="form-horizontal" action="/HRM/HRM.PasswordChange">
							    <div class="hr-line-dashed"></div>
                                <div class="form-group">
								<label class="col-sm-2 control-label">Employee Name</label>
                                    <div class="col-sm-10">
										<input type="text" disabled="" value="@@UserName@@" class="form-control">
									</div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
									<label class="col-sm-2 control-label">New Password</label>
                                    <div class="col-sm-10">
                                        <div class="row">
                                            <div class="col-md-6">
												<input type="password"  name="NPassword" placeholder="New Password" class="form-control">
											</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">Retype Password</label>
                                    <div class="col-sm-10">
                                        <div class="row">
                                            <div class="col-md-6">
												<input type="password" name="RPassword" placeholder="Retype Password" class="form-control">
											</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="form-group">
                                    <div class="col-sm-4 col-sm-offset-2">
                                        <button class="btn btn-white" type="reset">Cancel</button>
										 <!-- Trigger the modal with a button -->
										<button type="button" id="myBtn" class="btn btn-primary" data-toggle="modal" data-target="#myModal"  disabled />Confirm</button> 
                                    </div>
                                </div>
                            </form>

any suggestion or help would be appreciated.

Answer 1

Try to change your button to:

<button type="button" id="myBtn" class="btn ban-primary">Confirm</button>

And add following function:

$('#myBtn').on('click', function(){
  if(!empty) {
   $('#myModal').modal('toggle');
  }
});

You have to make empty a global variable. (untested code)