如何一次显示一个警报？

Question

我有几个要尝试进行验证的输入字段，例如是否未填写该字段，因此当用户单击保存按钮时向用户显示一些警报

因此，我创建了一个函数，其中在其中检查字段值，并且当用户单击“保存”然后调用该函数然后保存数据时，当我单击“保存”时，我正在检查有效性，然后询问用户{{ 1}}，然后保存，但是我的问题是，当我单击“保存”时，如果没有填写任何do you want to save data，则两个警报都将一个接一个地显示，我希望当某个字段为空时，用户只能得到警报

代码

input field

function validation() {

  if ($('#nameInput').val() == '') {
    $.alert({
      title: 'Alert!',
      content: 'please enter First Name',
      onDestroy: function() {

        $('#nameInput').focus();
      }
    });
    return false;
  }
  if ($('#lastNameInput').val() == '') {
    $.alert({
      title: 'Alert!',
      content: 'please enter Last Name',
      onDestroy: function() {

        $('#lastNameInput').focus();
      }
    });
    return false;
  }
  if ($('#classInput').val() == '') {
    $.alert({
      title: 'Alert!',
      content: 'please enter class',
      onDestroy: function() {

        $('#classInput').focus();
      }
    });
    return false;
  }
}

$("#save").click(function() {

  validation()

  $.confirm({
    title: '',
    content: 'Do you want to Save Data ?',
    buttons: {
      Yes: function() {



        $.confirm({
          title: 'Message',
          content: 'Data Saved',
          buttons: {
            ok: function() {}
          },
          onDestroy: function() {

          }
        });
      },

      No: function() {

      },

    }
  });

});

检查我的代码段以获取工作代码

注意，我没有使用必需的HTML属性，因为我必须指定哪个字段为空，并向该字段提供警报，而不是每个字段的通用警报，而且我还要保存点击数据该事件不在表单提交中，因为我有几个用于执行不同任务的按钮

Answer 1

这是您的代码：基本上只有在验证成功的情况下，才能运行确认。

function validation() {

  if ($('#nameInput').val() == '') {
    $.alert({
      title: 'Alert!',
      content: 'please enter First Name',
      onDestroy: function() {

        $('#nameInput').focus();
      }
    });
    return false;
  }
  if ($('#lastNameInput').val() == '') {
    $.alert({
      title: 'Alert!',
      content: 'please enter Last Name',
      onDestroy: function() {

        $('#lastNameInput').focus();
      }
    });
    return false;
  }
  if ($('#classInput').val() == '') {
    $.alert({
      title: 'Alert!',
      content: 'please enter class',
      onDestroy: function() {

        $('#classInput').focus();
      }
    });
    return false;
  }
  return true;
}

$("#save").click(function() {

  if (validation()) {

    $.confirm({
      title: '',
      content: 'Do you want to Save Data ?',
      buttons: {
        Yes: function() {



          $.confirm({
            title: 'Message',
            content: 'Data Saved',
            buttons: {
              ok: function() {}
            },
            onDestroy: function() {

            }
          });
        },

        No: function() {

        },

      }
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="form-row">

  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="nameInput">First Name</label>
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button" name="nameInput" id="nameInput">

    </div>
  </div>

  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="lastNameInput">Last Name</label>
    <div class="input-group">
      <input type="tel" class="form-control" aria-label="Text input with dropdown button" name="lastNameInput" id="lastNameInput">

    </div>
  </div>

  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="classInput">Class</label>
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button" name="classInput" id="classInput">

    </div>
  </div>


</div>
<button type="button" class="commonButton" id="save">
				Save
				</button>

Answer 2

检查您的验证是否未通过False，然后执行保存代码。

function validation() {

  if ($('#nameInput').val() == '') {
    $.alert({
      title: 'Alert!',
      content: 'please enter First Name',
      onDestroy: function() {

        $('#nameInput').focus();
      }
    });
    return false;
  }
  if ($('#lastNameInput').val() == '') {
    $.alert({
      title: 'Alert!',
      content: 'please enter Last Name',
      onDestroy: function() {

        $('#lastNameInput').focus();
      }
    });
    return false;
  }
  if ($('#classInput').val() == '') {
    $.alert({
      title: 'Alert!',
      content: 'please enter class',
      onDestroy: function() {

        $('#classInput').focus();
      }
    });
    return false;
  }
  return true;
}

$("#save").click(function() {

  var isValid = validation();
  if (isValid) {
  $.confirm({
    title: '',
    content: 'Do you want to Save Data ?',
    buttons: {
      Yes: function() {



        $.confirm({
          title: 'Message',
          content: 'Data Saved',
          buttons: {
            ok: function() {}
          },
          onDestroy: function() {

          }
        });
      },

      No: function() {

      },
    }
  });
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="form-row">

  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="nameInput">First Name</label>
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button" name="nameInput" id="nameInput">

    </div>
  </div>

  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="lastNameInput">Last Name</label>
    <div class="input-group">
      <input type="tel" class="form-control" aria-label="Text input with dropdown button" name="lastNameInput" id="lastNameInput">

    </div>
  </div>

  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="classInput">Class</label>
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button" name="classInput" id="classInput">

    </div>
  </div>


</div>
<button type="button" class="commonButton" id="save">
				Save
				</button>

Answer 3

首先不应使用警告框，因为它会阻止JS执行。 您可以做的是，在表单验证后，如果任何输入字段无效或为空，则可以用红色边框突出显示输入字段，以指示用户该字段未正确填充，并在旁边显示相应的错误消息。输入字段而不是警报框：）