フォームが検証されたときにのみモーダルを開く

Question

フォームが完全に検証され、エラーなしでモーダルダイアログボックスを開きたいとします。最初はボタンを無効にして、最初に検証し、フォームが検証されたときにのみ有効にする必要があります。私はこれをjqueryの検証を使用していますが、私が望む結果を得ることはありません。フィールドが満たされていない場合にユーザーが[送信]ボタンをクリックすると、モーダルを開くべきではありません。 は、ここで私が使用この

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

フォーム検証のための私のHTMLコード

     <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> 

と私のjqueryのです

$(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>

任意の提案や役立つだろうです感謝する。

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

そして、次の関数を追加します：あなたは空のグローバル変数を作成する必要があり

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

をするあなたのボタンを変更するには

Answer 1

してみてください。 （未テストコード）