Question

我不知道如何恰当地命名我的问题，但这里就是。

在我的HTML中我有一个“表单”而不是

 <form></form>

。它只是一些选择，单选按钮和文本输入。我输入，检查并选择值，并根据这些值进行一些计算。这种“形式”是计算每个keydown，模糊，变化。因此，当我更改一个值时，它会立即使用新值重新计算结果。

当他没有填写任何必要的输入时，我想提醒用户。现在它是如何工作的（这是在一个单独的.js文件中）

 function calculator() {

 // Here is code that gathers the data from html
 // and here are also some computations (many if-s)
 // The code is too long to be putted here
 }

 $(function () {
     $('select, input').on('keydown blur change', calculator);
 });

我试图在我的计算器函数中添加一个if语句：

function calculator() {

 // Here is code that gathers the data from html
 // and here are also some computations (many if-s)
 // The code is too long to be putted here

     if (val1 == '' && sadzba == '' && viem == '' && ...) {
         alert('You have to fill all necessary fields!')
     }

 }

这显然导致每次输入/选择新值时都会弹出警报，因为在开始时所有变量都是空的/没有值。那么我怎么能实现这种情况：用户填写“表单”，除了（例如）一个值，然后才会弹出警报。

比你。

Answer 1

我建议检查提交并返回 false ，如果其中一个字段为空，则阻止提交表单。

$('form').on('submit', function () {
    if (val1 == '' || sadzba == '' || viem == '') {
      alert('You have to fill all necessary fields!');
      return false;
    } else { return true; }
});

Answer 2

为onblur事件使用不同的事件处理程序，因为光标离开输入框时就是这样。（它还可以防止事件处理程序一直触发。这是一个非常昂贵的过程，它可以减慢你的页面速度）

$('select, input').on('blur', didTheyLeaveTheFieldEmpty);

Answer 3

希望我理解你，你可以试试这个：

function calculator(event) {
    if ( $(event.target).val().length == 0 ) {
          alert('fill the field');
    }
 }

$('select, input').on('keyup', calculator);

Answer 4

即使你不想要一个带有提交按钮的表单，你也可以创建一个按钮并点击它来触发你的代码

<input type="button" class="calculate">

 $(function () {
     $('.calculate').on('click', calculator);
 });

javascript onChange计算 - 只显示一个警报

4 个答案: