Question

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

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

当有人想要验证输入时，这是一般用例。

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

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

如何解决这个问题？我想在上面添加验证规则与警报弹出窗口合并（如果此验证没有通过，那么将显示警告弹出窗口，表示至少在输入时丢失）。但是如何将它们结合起来？

谢谢。

Answer 1

请尝试使用以下$ .each进行检查，至少需要检查一个

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

对于提醒提示，请尝试在上面的代码中使用提醒。无法从上述描述中理解。

Answer 2

您正在使用Html 5验证，每个浏览器的实现方式都不同。据我所知，您无法更改通知显示在哪里以及如何显示验证错误。如果您的要求是＆＃34; [...]至少一个输入＆＃34; ，那么这不是一个好的选择。添加required会使它们全部成为必需。

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

以下基本示例：

＆＃13;

$('#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
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: