jQuery Validierung + Dialog

Question

Ich baue jquery Validierung und ich muss es mit der Anzeige von Dialog unterstützen.

Es gibt mehrere Auswahl/Eingänge zu überprüfen, so wie es jetzt ist, bekomme ich mehrere Dialoge auf einmal angezeigt, und möchte nur einen Dialog mit der Liste der Felder anzeigen, die nicht validiert wurde (Fehler).

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

Arbeitsprobe jsfiddle: https://jsfiddle.net/nitadesign/sd8Lk9dv/

Wie kann ich das erreichen?

Answer 1

Basierend auf Antwort des Srikanth aber einige Änderungen, weil es einige Fehler gibt es:

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

Ändern Sie Ihre Jquery so.

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

Da wir alle Fehlermeldung in einzelnen Container anhängen, so halten Sie einzelne div wie folgt.

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