当未填写、检查或选择输入字段时，如何显示错误消息？

Question

我正在尝试为我的网站构建一个卡路里计算器。当字段未填写时，我试图显示错误/警告消息。例如：当未选择 attività lavorativa 并单击计算按钮时，会出现一条消息，警告用户尚未选择收音机。我希望我可以对输入类型数字字段做同样的事情，我不知道这是否需要对每个字段进行不同的操作。

我不知道这个功能是什么，我是一个粉丝，没有编程技能。请帮忙！

https://jsfiddle.net/snake93/89wtnxj4/273/

<!--Input Field-->
<label class="mts-label">Peso</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="3" id="weight" name"weight1" placeholder="es: 70Kg"/>

<label class="mts-label">Altezza</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="3" id="height" name"height1" placeholder="es: 170cm"/>

<label class="mts-label">Età</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="2" id="age" name"age1" placeholder="es: 25 anni"/>

<label class="mts-label">Bodyfat in %</label>
<input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="mts-field" maxlength="2" id="bodyfat" name"bodyfat1" placeholder="es: 15%"/>

<div class="mts-label">Sesso</div>

<!--Radio Button Sex-->
  <div class="mts-radio-button">
    <input type="radio" id="sexuomo" name="radios" value="Male">
    <label class="mts-label-radio" for="sexuomo">Uomo</label>
  </div>

  <div class="mts-radio-button1">
    <input type="radio" id="sexdonna" name="radios" value="Female">
    <label class="mts-label-radio" for="sexdonna">Donna</label>
  </div>
  
  <!--Radio Activity Level-->
  <br>
 
  <label class="mts-label">Attività lavorativa</label>
  <div class="mts-radio-button">
    <input type="radio" id="leggero" name="radiosa" value="1.2" onclick="calculate()">
    <label class="mts-label-radio" for="leggero">Leggero</label>
  </div>
  
   <div class="mts-radio-button">
    <input type="radio" id="attivo" name="radiosa" value="1.375" onclick="calculate()">
    <label class="mts-label-radio" for="attivo">Attivo</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="allenato" name="radiosa" value="1.55" onclick="calculate()">
    <label class="mts-label-radio" for="allenato">Allenato</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="Mattivo" name="radiosa" value="1.75" onclick="calculate()">
    <label class="mts-label-radio" for="Mattivo">Molto Attivo</label>
  </div>
  
  <div class="mts-radio-button">
    <input type="radio" id="Eattivo" name="radiosa" value="1.9" onclick="calculate()">
    <label class="mts-label-radio" for="Eattivo">Estremamente Attivo</label>
  </div>

<!---BMR Mifflin StJeor Result Field--->
<br>
<label class="mts-label">BMR Mifflin St Jeor Formula</label><br>


<div id="bmr-sexuomo" hidden>
<label class="mts-label">Male</label><br>
<input type="text" class="mts-field" id="bmr_mifflin_man" name="bmr_mifflin_man"
placeholder="0.000,0 Kcal" min="1" readonly/>
</div>

<br>
<div id="bmr-sexdonna" hidden>
<label class="mts-label">Female</label><br>
<input  type="text" class="mts-field" id="bmr_mifflin_woman" name="bmr_mifflin_woman"
placeholder="0.000,0 Kcal" min="1" readonly/>
</div>

<!---TDEE Mifflin StJeor Result Field--->
<br>
<label class="mts-label">TDEE Mifflin St Jeor Formula</label><br>
<div id="MifflinMale" hidden> 
<label class="mts-label">Male</label><br>
<input  type="text" class="mts-field" id="tdee_mifflin_man" name="tdee_mifflin_man"
placeholder="0.000,0 Kcal Uomo" min="1" readonly/>
</div>

<br>
<div id="MifflinFemale" hidden> 
<label class="mts-label">Female</label><br>
<input  type="text" class="mts-field" id="tdee_mifflin_woman" name="tdee_mifflin_woman"
placeholder="0.000,0 Kcal donna" min="1" readonly/>
</div>

<!---BMR Katch McArdle Formula--->
<br>
<label class="mts-label">BMR Katch McArdle Formula</label>
<div id="Ktch"> 
<input  type="text" class="mts-field" id="bmr_katch" name="bmr_katch"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---TDEE Katch McArdle Formula--->
<br>
<label class="mts-label">TDEE Katch McArdle Formula</label>
<div id="Ktch"> 
<input  type="text" class="mts-field" id="tdee_katch" name="tdee_katch"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---BMR Cunningham Formula--->
<br>
<label class="mts-label">BMR Cunningham Formula</label>
<div id="Cunningham"> 
<input  type="text" class="mts-field" id="bmr_cunningham" name="bmr_cunningham"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---TDEE Cunningham Formula--->
<br>
<label class="mts-label">TDEE Cunningham Formula</label>
<div id="Cunningham"> 
<input  type="text" class="mts-field" id="tdee_cunningham" name="tdee_cunningham"
placeholder="0.000,0 Kcal" maxlength="6" readonly/>
</div>

<!---Calc & Reset Button--->
<br>
<button name="calculate" onclick="calculate()">Re-Calculate</button>
<button id="reset" onclick="resetFields()">Reset</button>

 // Calc-Function
calculate = function()
{
    var weight = document.getElementById('weight').value;
    var height = document.getElementById('height').value;
    var age = document.getElementById('age').value;
    var bodyfat = document.getElementById('bodyfat').value / 100;
    var ActivityLevel = document.querySelector('input[name="radiosa"]:checked').value;
    
//Sex Selection Hide-Show Div// 

var sex = document.querySelector('input[name="radios"]:checked').value;
document.getElementById('bmr-sexuomo').hidden = sex !== 'Male';
document.getElementById('bmr-sexdonna').hidden = sex !== 'Female';
document.getElementById('MifflinMale').hidden = sex !== 'Male';
document.getElementById('MifflinFemale').hidden = sex !== 'Female';
    
var bmr_mifflin_man = (10*weight) + (6.25*height) - (5*age) + 5;
document.getElementById('bmr_mifflin_man').value = bmr_mifflin_man.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

var tdee_mifflin_man = (bmr_mifflin_man*ActivityLevel);
document.getElementById('tdee_mifflin_man').value = tdee_mifflin_man.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

var bmr_mifflin_woman = (10*weight) + (6.25*height) - (5*age) - 161;
document.getElementById('bmr_mifflin_woman').value = bmr_mifflin_woman.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

var tdee_mifflin_woman = (bmr_mifflin_woman*ActivityLevel);
document.getElementById('tdee_mifflin_woman').value = tdee_mifflin_woman.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";


 //Result BMR Katch Mc Ardle Formula
    var bmr_katch = (370 + ( 21.6 * ( weight * ( 1 - bodyfat )))); 
document.getElementById('bmr_katch').value = bmr_katch.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

//Result TDEE Katch Mc Ardle Formula
    var tdee_katch = (bmr_katch*ActivityLevel); 
document.getElementById('tdee_katch').value = bmr_katch.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

//Result BMR Cunningham Formula
    var bmr_cunningham = (500 + ( 22 * ( weight * ( 1 - bodyfat )))); 
document.getElementById('bmr_cunningham').value = bmr_cunningham.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

//Result TDEE Cunningham Formula
    var tdee_cunningham = (bmr_cunningham*ActivityLevel); 
document.getElementById('tdee_cunningham').value = bmr_cunningham.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal";

//This is Activity Level Radio Selection//
 var leggero = document.getElementById('leggero').value * 1.2;
 var attivo = document.getElementById('attivo').value * 1.375;
 var allenato = document.getElementById('allenato').value * 1.55;
 var Mattivo = document.getElementById('Mattivo').value * 1.75;
 var Eattivo = document.getElementById('Eattivo').value * 1.9;
 
}

//Reset Function
function resetFields(){
    var inputArray = document.querySelectorAll('input');
    inputArray.forEach(function (input){
        input.value = "";
    });
}

//Error Message

??

Answer 1

您可以在 keyup blur change 等上收听，然后检查每个字段值是否为空。

$(function(){
   // iterate on any input that has the classname `required`
   $.each($('input.required'), function(){
      // run a function every time the element's keyup event is fired
      $(this).on('keyup', function(){
        let value = $(this).val()
        if (value.trim() === '') {
            // or add error class
            // $(this).addClass('invalid')
            $(this).css({ 'border' : '1px solid red !important' });
        } else {
            // $(this).removeClass('invalid')
            $(this).css({ 'border' : 'none' });
        }
      })
   })
})

举个简单的例子，上面的脚本将监听带有 class .required 的更改事件的输入，如果值为空，它将添加一个红色边框。

注意，这需要 Jquery

当未填写、检查或选择输入字段时，如何显示错误消息？

How can I show an error message when input field is not filled, checked or selected?

html

javascript

jquery

calculator