Question

如果我自定义jQuery验证（即https://jqueryvalidation.org/）错误消息以包含链接，例如

$("form").validate({
  messages: {
    foo: {
      required: 'This field is required, <a href="#" onclick="alert(0); return false;">click here to find out why</a>',
    }
  }
});

该链接在第一次点击时不起作用，仅在第二次及以后。

在这里演示：http://jsfiddle.net/jo6myLf9/

发生了什么事？

Answer 1

根据我上面的评论，它似乎是焦点问题。

您可以添加false选项，并将其设置为focusInvalid: false，根据文档，“禁用无效元素的聚焦”会导致您的问题。< / p>

$("form").validate({
  focusInvalid: false,
  messages: {
    foo: {
      required: 'This field is required, <a href="#" onclick="alert(0); return false;">click here to find out why</a>',
    }
  }
});

完整代码：

<div class="hero-image-row">
  <div class="hero-image-outer text-center">
    <div class="hero-image-inner text-center">
      <%= image_tag 'Background 4.jpg', class: "hero-image",alt: "View of Golf Course, Ocean, and Dunes" %>
    </div> <!-- hero-image-inner -->
  </div> <!-- hero-image-inner -->
</div> <!-- row -->


<div class="overlap-hero-image container">
  <div class="text-center page-title-bar">
    <h1 style="color: white; margin-top: 120px">Personalized Golf Tips Newsletter</h1>
    <h3 class="black-outline" style="color: white; margin-top: 100px">Your golf game is as unique as you are.<br>Shouldn't your golf tips be personalized to fit you?</h3>
  </div>
</div>

this thread

但是，如果元素焦点对您和您的应用程序（UX？）很重要，那么这对您没有帮助。

Answer 2

要在单击后获得警报的预期结果，请在该警报后使用以下选项

      $("form").validate({
        focusInvalid: false,
        messages: {
          foo: {
            required: 'This field is required, <a href="#" onclick="alert(0);$(\'#foo\').focus(); return false;">click here to find out why</a>',
          }
        }
      });

在onclick功能中，我将焦点设置回该输入字段，focusInvalid：false将在单击时显示警告，这将涵盖所有场景

JSFiddle - http://jsfiddle.net/Nagasai_Aytha/6oer7bkg/2/供参考

希望这适合你。

jQuery验证错误消息中的链接在首次单击时不起作用

2 个答案: