jQuery 验证（通过 '.attr('required', true)'） - 如果字段为空，如何显示警报弹出窗口？答案

【问题标题】：jQuery validation (through '.attr('required', true)') - how to display alert popup if the field is empty?jQuery 验证（通过 '.attr('required', true)'） - 如果字段为空，如何显示警报弹出窗口？
【发布时间】：2015-06-30 12:39:13
【问题描述】：

我只是通过运行以下代码来验证输入

$(".new_address").attr('required', true);

这是有人想要验证输入的一般用例。

这是我的情况 - 我正在向表单添加输入（使用 class="new_address"）。这很好用。但是现在，我需要确保用户添加了至少一个具有该特定类的输入 (class="new_address")。该怎么做？

如果我仅使用此验证 $(".new_address").attr('required', true); 并尝试发送没有任何输入的表单 new_address，则不会发送表单，但同时 - 我没有看到任何错误消息 (因为这些输入没有添加到页面中，所以小弹出窗口没有空间显示。

如何解决这个问题？我正在考虑在与警报弹出窗口合并的上方添加验证规则（如果此验证未通过，则将显示警报弹出窗口，说明至少在输入中丢失）。但是如何结合呢？

谢谢。

【问题讨论】：

对“new_address”类的所有输入使用一个javascript每个循环，并检查该值是否为空。如果任一值不为空，则触发表单提交事件。
你应该使用$(".new_address").attr('required', 'required');或$(".new_address").prop('required', true);

标签： javascript jquery validation alert

【解决方案1】：

请尝试使用下面的 $.each 来检查是否需要至少一个

$(".new_address").each(function (){
//your code to check least one is required using below attribute
$(this).attr('required', 'required');    
});

对于弹出警报，请尝试在上述代码中使用警报。从上面的描述看不懂。

【讨论】：

【解决方案2】：

您正在使用 Html 5 验证，每个浏览器的实现方式都不同。据我所知，您无法更改验证错误通知的显示位置和方式。如果您的要求是“[...] 至少一个输入”，这不是一个好的选择。添加required 将使它们都成为必需的。

您可以做的是添加您自己的验证。例如，您可以在单击提交按钮时附加一个事件，该事件将检查输入是否存在和/或它是否具有任何值。要检查元素是否存在，您可以使用$('.new_address').length。

下面的一个基本示例：

$('#myAdder').click(function() {
  $('#myForm').prepend('<input type="text" class="new_address" value=""/><br/>');
});

$('#mySubmit').click(function() {
  $('#myValidationSummary').text('').hide();
  var oneFilledIn = false;
  $('.new_address').each(function(i, o) {
    if (o.value.length > 0) {
      oneFilledIn = true; //at least one element is filled in
      return false; //exit the each
    }
  });
  if ($('.new_address').length == 0 || !oneFilledIn) {
    $('#myValidationSummary').text('New address must be added and filled in').show();
    return false; //this makes sure the form doesn't post
  }
});

$('#myForm').submit(function() {
  alert('form submitted ok'); //dummy code just to show the form submission
});

#myValidationSummary {
  color: red;
  border: 1px solid #000;
  padding: 4px;
  display: none;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myValidationSummary"></div>
<form id="myForm">
  <input type="button" id="myAdder" value="Add input" />
  <input type="submit" id="mySubmit" value="Submit it" />
</form>

【讨论】：