Question

我正在尝试在某个输入未填写或未在我的表单中正确填写时显示require弹出窗口。所以，为此，我创建了这个表单：

<form id="login">
<input class="form-control require" type="email"  placeholder="username" ></input>
<button type="submit">
go
</button>
</form>

我将逻辑放在js函数中：

$('#login').submit(function(event)
{
   event.preventDefault();

  $(event.target).find('.require').each(function()
  {
    if($(this).val().length == 0)
    {
      this.setCustomValidity("Field Required!");
    }
    else
    {
      this.setCustomValidity('');
    }
  });

    console.log('ajax execution');
});

现在，您可以看到提交表单的时间我阻止了默认事件submit，并为每个控件分配了自定义验证错误。现在的问题是，如果一个字段没有正确定价，例如是空白我没有显示弹出窗口，相反，如果我再次按下提交按钮，我可以看到UI上出现require弹出窗口。

有人可以帮我解决这个问题吗？

我举了一个例子JSFIDDLE here.

当您第一次按下按钮时没有出现弹出窗口，第二次出现正确但是，这应该是第一次出现或者无论如何，每次特定字段无效时都会出现。

Answer 1

if($(this).val().length == 0)如果输入字段只有空格，则此代码将无法正常运行。为了避免这种情况你应该使用它：

if($.trim($(this).val()).length == 0)

OR

if($.trim($(this).val()) == "")

Answer 2

你的问题似乎是提交事件只触发一次。我不熟悉bootstrap，所以我之前没有看过setCustomValidity函数，但我猜它可能附加了自己的监听器，这可以防止按钮点击触发提交。

我注意到如果我在文本框中输入内容并触发setCustomValidity，则会显示“请输入电子邮件地址” - 我在您的代码中没有看到。如果我输入'asdf@qwer.dfsgh'，它将被验证并提交。

所以看起来你还没有理解应该如何使用setCustomValidity。我猜，你可能应该在页面首次加载时附加一次，而不是像你一样重复。

如何手动显示需要弹出窗口？

2 个答案: