Modal nur öffnen, wenn das Formular validiert wird

Question

Ich möchte ein modales Dialogfeld nur öffnen, wenn das Formular vollständig fehlerfrei validiert wurde. Zuerst habe ich meine Schaltfläche deaktiviert, so dass sie zuerst validiert werden sollte und sie sollte erst aktiviert werden, wenn das Formular validiert wurde. Ich benutze jquery Validierung für diese, aber nicht das Ergebnis, das ich will. Ich möchte, wenn Benutzer auf Senden klicken, wenn Felder nicht gefüllt sind, sollte es nicht Modal öffnen. hier ist mein 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> 

und mich jquery für dieses

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

Die Formular-Validierung, die ich verwendet, ist

$(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: 
 
\t \t { 
 
      NPassword: 
 
\t \t \t { 
 
       validators: 
 
\t \t \t \t { 
 
        notEmpty: 
 
\t \t \t \t \t { 
 
         message: 'The password is required and can\'t be empty' 
 
        } 
 
       } 
 
      }, 
 
      RPassword: 
 
\t \t \t { 
 
       validators: 
 
\t \t \t \t { 
 
        notEmpty: 
 
\t \t \t \t \t { 
 
         message: 'The confirm password is required and can\'t be empty' 
 
        }, 
 
        identical: 
 
\t \t \t \t \t { 
 
         field: 'NPassword', 
 
         message: 'The password and its confirm are not the same' 
 
        } 
 
       } 
 
      } 
 
     } 
 
    }); 
 
});

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

jede Anregung oder Hilfe würde geschätzt werden.

Answer 1

Versuchen Sie, Ihre Schaltfläche zu ändern:

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

Und füge Funktion folgende:

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

Sie leer eine globale Variable zu machen. (ungetesteter Code)