javascript - 如何一次显示一个警报?

标签 javascript jquery html

我有几个输入字段,我试图对其进行验证,例如如果该字段未填写,那么当用户单击“保存”按钮时向用户显示一些警报

因此,我创建了一个函数,在其中检查字段值,当用户单击“保存”时,调用该函数,然后保存数据,当我单击“保存”时,我正在检查验证,然后询问用户 你想保存数据并保存吗,但我的问题是当我点击保存时,如果任何输入字段未填写,那么两个警报都会一一显示,我想当某些字段为空时,用户只会收到该警报

代码

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() {

      },

    }
  });

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

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

注意我没有使用必需的 HTML 属性,因为我必须指定哪个字段为空并向该字段发出警报,而不是每个字段的常见警报,而且我还在点击时保存数据事件不在表单提交上,因为我有几个用于不同任务的按钮

最佳答案

这是您的代码:基本上仅在验证成功时才运行确认。

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>

关于javascript - 如何一次显示一个警报?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56767273/

相关文章:

jquery - 可点击的链接来更改 javascript

javascript - Ember.RSVP 中的条件 promise

javascript - 通过 AJAX 使用 jquery 工具包 (jkit) 验证发布表单

php - HTML-PHP 相对路径到绝对路径

javascript - 无法识别删除个人资料图片并显示头像

javascript - 在占位符放置区上传图像?

javascript - Angularjs 自定义 select2 指令

php - 带有 Bootstrap 的 PHP 的 HTML 菜单看起来不一样

javascript - 为什么我的 td onClick 没有触发?

javascript - 提交按钮在包含带有 foreach 的表格的表单中不起作用