如何驗證表單中的單個字段時，我有5個字段使用JavaScript？

Question

我有一個表格有四個字段，當所有的字段都是空的，點擊提交按鈕時，它應該提醒「請至少選擇一個值」。

當我在任何字段中輸入值時，表單應該被提交。我試着下面的代碼，但它不是由表單內通過所有的input S的迭代工作

function validatefleid() { 
 
    var computername = document.myform.computername.value; 
 
    var monitorname = document.myform.monitorname.value; 
 
    var tvname = document.myform.tvname.value; 
 
    var laptopname = document.myform.laptopname.value; 
 
    var cellphonename = document.myform.cellphonename.value; 
 
    if ((computername == null || computername == "") || (monitorname == null || monitorname == "") || (tvname == null || tvname == "") || (laptopname == null || laptopname == "") || (cellphonename == null || cellphonename == "")) { 
 
    alert("Please atleast one value"); 
 
    return false; 
 
    } 
 

 
}

<form name="myform" onsubmit="return validatefleid()"> 
 
    computer 
 
    <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">monitor 
 
    <input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">tv 
 
    <input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">laptop 
 
    <input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">cellphone 
 
    <input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000"> 
 

 
    <button type="submit">Calculate</button> 
 
</form>

Answer 1

這是可能的，並且尋找至少一個input與值比''的不同。檢查演示：

$(function(){ 
 
    var $form = $('#myform'); 
 
    $form.submit(function(){ 
 
    var valid = false; 
 
    $('input', $form).each(function(){ 
 
     if($(this).val() != ''){ 
 
     valid = true; 
 
     } 
 
    }); 
 
    if (!valid) { 
 
     alert("Please atleast one value"); 
 
    } 
 
    return valid; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myform" name="myform"> 
 

 

 
computer<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000"> 
 
monitor<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000"> 
 
tv<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000"> 
 
laptop<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000"> 
 
cellphone<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000"> 
 

 
<button type="submit" >Calculate</button> 
 

 
</form>

Answer 2

oops i have got the answer 

I have a form which as four fields when the all the fields are empty and submit button is clicked it should alert as "please select atleast one value" when i entry the value in any of the one fields the form should get submitted i have tries the following code but its not working 



    <script type="text/javascript"> 
     function validatefleid() 
     { 
    var computername=document.myform.computername.value; 
    var monitorname=document.myform.monitorname.value; 
    var tvname=document.myform.tvname.value; 
    var laptopname=document.myform.laptopname.value; 
    var cellphonename=document.myform.cellphonename.value; 
    if((computername==null || computername=="") && (monitorname==null || monitorname=="") && (tvname==null || tvname=="") && (laptopname==null || laptopname=="") && (cellphonename==null || cellphonename=="")) 
    { 
     alert("Please atleast one value"); 
     return false; 
    } 

     } 


    </script> 

    <form name="myform" onsubmit="return validatefleid()"> 


    computer<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000"> 
    monitor<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000"> 
    tv<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000"> 
    laptop<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000"> 
    cellphone<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000"> 

    <button type="submit" >Calculate</button> 

    </form> 

Answer 3

沒有jQuery的：

https://jsfiddle.net/uL28jsf9/

<script type="text/javascript"> 
function validatefleid() 
{ 
    var allFieldsNames = ['computername', 'monitorname', 'tvname', 'laptopname', 'cellphonename']; 

    var checkIfFieldEmpty function(fieldName) { 
     var fieldValue = document.myform[fieldName].value; 

     return fieldValue === "" || fieldValue === null 
    } 

    var allFieldsEmpty = allFieldsNames.every(checkIfFieldEmpty); 

    if (allFieldsEmpty) { 
    alert("Please atleast one value"); 
    return false; 
    } 
    else { 
    alert("I'm ok with that !") 
    } 
} 
</script> 

Answer 4

這裏是一個完整的跨瀏覽器版本工作validatefleid函數的使用。

function validatefleid(){ 
    var inputIds = ['computerid','monitorid','tvid','laptopid','cellphoneid']; 
    var hasEnteredAnyValue = false; 

    for(var i=0;i<inputIds.length;i++){ 
     hasEnteredAnyValue = document.getElementById(inputIds[i]).value; 

     if(hasEnteredAnyValue)break;   
    } 

    if(!hasEnteredAnyValue) 
    { 
     alert("Please atleast one value"); 
     return false; 
    } 
}