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

Question

alerts if 3 textboxes or any single text box is empty我將顯示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" 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 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我必須在JavaScript中編寫許多if-else statements 。 他們是否有任何解決方案以最小化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

偽代碼：

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 2

要檢查每個空的復選框，請使用以下簡單的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;
}

在您提交時致電確認！ 像這樣：

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

也許這就是您想要的：

小提琴

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

Answer 4

使用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);
  }
}