如何在顯示警報時最小化if-else語句

Question

我正在顯示alerts if 3 textboxes or any single text box is empty。例如：如果 all are empty then alert will be" please fill up all" else if 1st and 2nd text boxes are empty then alert will be "please fill up 1st and 2nd text box" 同樣if 1st and 3rd text boxes are empty then alert will be "please fill up 1st and 3rd text box" 同樣if 2nd and 3rd text boxes are empty then alert will be "please fill up 2nd and 3rd text box" 同樣if only 1st text box is empty then alert will be "please fill up 1st text box" 同樣if only 2nd text box is empty then alert will be "please fill up 2nd text box" 同樣if only 3rd text box is empty then alert will be "please fill up 3rd text box"

但問題是我是否number of text boxes are 10 or more寫這麼多if-else statements在JavaScript。他們的任何解決方案，以儘量減少code和accordingly alert will come if any of the above condition satisfies？

我已經單獨寫的if-else code但這樣很漫長：

<form name="frm" action="confirmsubmit.jsp"> 
<script type="text/javascript"> 
<!-- 
function confirmation() { 
    var textboxname1=document.frm.textboxname1; 
    var textboxname2=document.frm.textboxname2; 
    var textboxname3=document.frm.textboxname3; 

//alert if all text boxes are empty 

     if((textboxname1.value==null)||(textboxname1.value=="")&& (textboxname2.value=="")||(textboxname2.value==null)){ 
    alert("Please fill up first text box<br/>Please fill up second text box<br/>Please fill up 3rd text box");//alert for all 
      textboxname1.focus(); 
      return false 
     } 

    //alert if 2nd text box is empty 

     else if((textboxname2.value=="")||(textboxname2.value==null)) 
      { 
alert("Please Please fill up second text box");//alert for 2nd text box 
      textboxname2.focus(); 
      return false 
      }    

    //alert if 3rd text box is empty 

     else if((textboxname3.value=="")||(textboxname3.value==null)) 
      { 
alert("Please Please fill up third text box");//alert for 3rd text box 
      textboxname3.focus(); 
      return false 
      } 

      // similarly i have to show alert if 2nd and 3rd boxes are empty and so on, but is there any solution to minimize the code? 

      return true 

    } 
    //--> 
    </script> 


<input type="text" name="textboxname1"/> 
<input type="text" name="textboxname2"/> 
<input type="text" name="textboxname3"/> 
<input type="submit" onclick="return confirmation()"/> 
</form> 

Answer 1

檢查每一個空的複選框使用這個簡單的jquery選擇器：

jQuery('input.test').not('[value]').each(function() { 
    var blankInput = jQuery(this); 
    //do what you want with your input 
}); 

你的js會是這樣的：

function confirmation(domForm) { 
    var jForm = jQuery(domForm); 
    var values = jForm.find('.check').serializeArray(); 

    var failedFields = []; 
    for(var i = 0; i < values.length; i++) { 
     var o = values[i]; 
     if(o.value == null || o.value.length == 0) { 
      failedFields.push(o.name); 
     } 
    } 

    if(failedFields.length > 0) { 
     var message = ''; 
     if(failedFields.length == values.length) { 
      message = 'fill all fields please'; 
     } 
     else { 
      message = 'please fill the fields:'; 
      for(var i = 0; i < failedFields.length; i++) { 
       message += "\n"; 
       message += failedFields[i]; 
       } 
     } 

     alert(message); 
     return false; 
    } 

    return true; 
} 

確認您的onsubmit！像這樣：

<form name="frm" onsubmit="return confirmation(this)" action="confirmsubmit.jsp"> 
    <input type="text" name="textboxname1" class="check"/> 
    <input type="text" name="textboxname2" class="check"/> 
    <input type="text" name="textboxname3"/> 
    <input type="submit"/> 
</form> 

Answer 2

使用jQuery，你將能夠做到這一點。要用最少的代碼來做到這一點，我建議採用以下方法。一類添加到所有的文本框，如果他們中任何一個空洞的表演警報

<input type="text" name="textboxname1" class ="test"/> 
<input type="text" name="textboxname2" class ="test"/> 
<input type="text" name="textboxname3" class ="test"/> 

，並在腳本

function confirmation() { 
    var elements = $('.test'); 
    var index = 1; 

    var message = ""; 
    elements.each(function(){ 
     if($(this).val() == ""){ 
     message += "textbox no" + index + "is empty ";   

     } 

    index = index + 1; 
    }); 
    if(message != ""){ 
    alert(message); 
    } 
} 

Answer 3

僞代碼：

emptyTextboxen = [] 

for each textboxen as textbox 
    if textbox is empty 
     emptyTextboxen.push(textbox) 

if emptyTextboxen.length == textboxen.length 
    message = 'Please fill up all textboxen' 
else if emptyTextboxen.length > 0 
    message = 'Please fill up textboxen ' 
    for each emptyTextboxen as emptyTextbox 
     message += emptyTextbox + ', ' 
else 
    message = 'Life is good' 

Answer 4

也許這是你在找什麼：

FIDDLE

$('form[name="frm"]').on('submit', function(e) { 
    var empty = $('input[type="text"]', this).filter(function() { 
     if ($(this).val()=="") return this; 
    }); 
    if (empty.length > 0) { 
     e.preventDefault();    
     if (empty.length == $(this).children('[type="text"]').length) { 
      alert('please fill up all'); 
     }else{ 
      var str = 'please fill up '; 
      $(empty).each(function(index, value) { 
       var Sepa = index==empty.length-2 ? ' and ' : ', ', 
        Numb = parseInt(this.name[this.name.length-1]); 
       Sepa = index==empty.length-1 ? '' : Sepa;       
       Numb=Numb==1?'1st':Numb==2?'2nd':Numb==3?'3rd':Numb+'th'; 
       str=str+Numb+Sepa; 
      }); 
      str=str+' text box'; 
      alert(str);     
     } 
    }else{ 
     alert('All are filled, form will be submitted'); 
    } 
});