как минимизировать операторы 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"

Но проблема в том, что я должен написать так много if-else statements в javascriptесли number of text boxes are 10 or more.Есть ли какое-нибудь решение для этого, чтобы минимизировать 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

Может быть, это то, что вы ищете:

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

Answer 3

для проверки каждого пустого флажка используйте этот простой селектор 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 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);
  }
}