jQuery验证错误消息的单击事件

a11xaf1n  于 2022-12-26  发布在  jQuery
关注(0)|答案(4)|浏览(166)

我正在使用jQuery的bassist验证插件。
为了保持表单清晰,我只在无效字段后放置了一个字母作为Errormessage(例如“F”表示无效格式)。现在,我想给予用户通过单击字母,在一个特殊的div(#errordetails)中选择详细的错误消息。

$(".contactForm").validate({
    rules ....
}),

...

我想放一些类似的东西:

$("label.error").click(function() {
    alert("The Errormessage was clicked ...");
})

我应该把这个代码放在哪里?
$(document).ready()中,事件不起作用。其他元素的单击事件工作正常,但$("label.error")的事件不起作用
验证后我的HTML:

<div class="formField cf">
  <label for="contactGeburt">Geb.datum *
    <span style="font-size: 10px; color: #999">&nbsp;(dd.mm.jjjj)
    </span>
  </label>
  <input type="text" maxlength="10" id="gebdatum" name="gebdatum" class="textField datum error">
  <label for="gebdatum" generated="true" class="error">
    <span class="errorvalue">P
    </span>
  </label>
</div>

这里是jQuery部分

$(document).ready(function() {
  $(".contactForm").validate({
      rules: {
        gebdatum: {
          required: true,
          dateDE: true
        }
      },
    }),

    //This does not work
    $(function() {
      $("label.error").click(function() {
        alert("The Errormessage was clicked ...");
      });
    });

  // This works - H1 is also on the document ;-)
  $(function() {
    $("h1").click(function() {
      alert("H1 was clicked ...");
    });
  });
});

我已经测试了(有效的)代码,但它不工作。我已经从bassistance启动了演示页面:
http://jquery.bassistance.de/validate/demo/
我粘贴这个函数:

$("label").click(function() {
  alert("The Label was clicked ...");
});

然后运行代码(控制台)。单击文本字段中的标签时会显示警报消息。单击“提交”按钮后,错误标签(红色)不会对事件做出React,但输入字段的标签会显示警报框。
所以我再次从控制台运行代码(在屏幕上显示错误之后),现在显示了alterbox。
所以我认为,事件必须放在表单中的validate-event中,但是我不知道正确的语法。
以下是JSFiddle的链接,其中包含所有资源:http://jsfiddle.net/frank79/HVEXm/

hec6srdp

hec6srdp1#

我有办法了:

$(".contactForm").delegate("label", 'click', function() {
    alert("A Label was clicked....");
}).validate({
    rules: {
        gebdatum: {
            required: true,
            dateDE: true
        }
    }
})

调用click-handler时我的标签不存在。

wixjitnu

wixjitnu2#

您应该将代码放在jQuery的document ready函数中,如下所示:

$(function() {
  $("label.error").click(function() {
    alert("The Errormessage was clicked ...");
  });
});
ac1kyiln

ac1kyiln3#

下面是您的原始代码::http://jsfiddle.net/2EwUK/

  • 当点击顶部的JSLint按钮时,webapp会在代码中引发一些语法错误。
  • 您不应该在$(document).ready()中使用多个$(function() { });,因为它们是完全相同的代码

以下是更新后的版本:http://jsfiddle.net/mwLWR/1/并且它工作了。感谢评论,我也添加了一个验证插件的参考。

iezvtpos

iezvtpos4#

click()方法只能将函数绑定到调用该方法时DOM中某个元素的click事件。
由于错误标签是稍后添加到DOM中的,因此它们不会受到影响。
使用.live()或jQuery 1.7中的.on()方法。

$("label").live("click", function() {
    alert("A Label was clicked....");
});

相关问题