jQuery驗證+對話框

Question

我正在構建jquery驗證，我需要通過顯示對話框來支持它。

有多個選擇/輸入需要檢查，因此，現在我可以一次顯示多個對話框，並且只想顯示一個對話框，其中包含尚未驗證的字段列表（錯誤）。

HTML：

<form method='post'> 
    input 1: <input type="text" id="input1" name="input1" class="in1"><br> 
    input 2: <input type="text" id="input2" name="input2" class="in2"><br> 
    input 3: <input type="text" id="input3" name="input3" class="in3"><br> 
    <input type="submit" value="Submit" id="submit" name="submit">   
</form> 

<div id="dialog-input1" title="Error" class="val-noshow">Empty Input 1</div> 
<div id="dialog-input2" title="Error" class="val-noshow">Empty Input 2</div> 
<div id="dialog-input3" title="Error" class="val-noshow">Empty Input 3</div> 

的jQuery：

$(document).ready(function() { 

    $("#submit").click(function() { 

     var input1 = $('#input1').val(); 
     var input2 = $('#input2').val(); 
     var input3 = $('#input3').val(); 

     var valid = true; 

     if (input1 == "") 
     { 
      $('.in1').removeClass('valid').addClass('error'); 
      valid = false; 
      $(function() { 
       $("#dialog-input1").dialog({ 
        modal: true, 
        buttons: { 
         Ok: function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 
      }); 
     } 
     else { 
      $('.in1').removeClass('error').addClass('valid'); 
     } 

     if (input2 == "") 
     { 
      $('.in2').removeClass('valid').addClass('error'); 
      $(function() { 
       $("#dialog-input2").dialog({ 
        modal: true, 
        buttons: { 
         Ok: function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 
      }); 
      valid = false; 
     } 
     else { 
      $('.in2').removeClass('error').addClass('valid'); 
     } 

     if (input3 == "") 
     { 
      $('.in3').removeClass('valid').addClass('error'); 
      $(function() { 
       $("#dialog-input3").dialog({ 
        modal: true, 
        buttons: { 
         Ok: function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 
      }); 
      valid = false; 
     } 
     else { 
      $('.in3').removeClass('error').addClass('valid'); 
     } 

     return valid; 

    }); 
}); 

CSS：

.val-noshow { display: none; } 
.error { border: 1px #F00 solid; color: #F00;} 
.valid { border: 1px #979 solid; } 

工作樣本的jsfiddle：https://jsfiddle.net/nitadesign/sd8Lk9dv/

我該如何存檔？

Answer 1

基於SRIKANTH的答案，但一些修改，因爲有一些失誤有：

$("#submit").click(function(event) { 

    $("#dialog-input").html(""); 

    var input1 = $('#input1').val(); 
    var input2 = $('#input2').val(); 
    var input3 = $('#input3').val(); 

    var valid = true; 

    if (input1 == "") { 

     $('.in1').removeClass('valid').addClass('error'); 
     $("#dialog-input").append("<p>Empty Input 1</p>"); 

     valid = false; 
    } else { 
     $('.in1').removeClass('error').addClass('valid'); 
    } 

    if (input2 == "") { 

     $('.in2').removeClass('valid').addClass('error'); 
     $("#dialog-input").append("<p>Empty Input 2</p>"); 

     valid = false; 
    } else { 
     $('.in2').removeClass('error').addClass('valid'); 
    } 

    if (input3 == "") { 

     $('.in3').removeClass('valid').addClass('error'); 
     $("#dialog-input").append("<p>Empty Input 3</p>"); 

     valid = false; 
    } else { 
     $('.in3').removeClass('error').addClass('valid'); 
    } 

    if (!valid) { 

     $(function() { 
     $("#dialog-input").dialog({ 
      modal: true, 
      buttons: { 
      Ok: function() { 
       $(this).dialog("close"); 
      } 
      } 
     }); 
     }); 
    } 

    return valid; 
    }); 

Answer 2

像這樣改變你的jQuery。

<script> 
$(document).ready(function() { 

    $("#submit").click(function (event) { 

     event.preventDefault();    
     $("#dialog-input").html(""); 

     var input1 = $('#input1').val(); 
     var input2 = $('#input2').val(); 
     var input3 = $('#input3').val(); 

     var valid = true; 

     if (input1 == ""){ 

      $('.in1').removeClass('valid').addClass('error'); 
      $("#dialog-input").append("<p>Empty Input 1</p>"); 

      valid = false; 
     } 
     else { $('.in1').removeClass('error').addClass('valid'); } 

     if (input2 == "") { 

      $('.in2').removeClass('valid').addClass('error'); 
      $("#dialog-input").append("<p>Empty Input 2</p>"); 

      valid = false; 
     } 
     else { $('.in2').removeClass('error').addClass('valid'); } 

     if (input3 == "") { 

      $('.in3').removeClass('valid').addClass('error'); 
      $("#dialog-input").append("<p>Empty Input 3</p>"); 

      valid = false; 
     } 
     else { $('.in3').removeClass('error').addClass('valid'); } 

     if(!valid){ 

      $(function() { 
       $("#dialog-input").dialog({ 
        modal: true, 
        buttons: { 
         Ok: function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 
      }); 
     } 
     else{ return valid; } 
    }); 
}); 
</script> 

由於我們在單個容器中附加了所有錯誤消息，所以請保留單個div。

<div id="dialog-input" title="Error" class="val-noshow"></div>