Question

这是一个简单的场景

1）我使用AJAX浏览我的网站页面。仅为UI更好的外观（动画等）

2）如果用户未经过身份验证，我会通过AJAX加载登录表单。该表单包含以下简单代码

$('#ajaxform').validate(
{
   rules: {
      login: {
         minlength: 2,
         required: true
      },
      password: {
         required: true,
         minlength: 2
      }
   },
   highlight: function (element) {
      $(element).removeClass('success').addClass('error');
   },
   success: function (element) {
      element.addClass('valid').removeClass('error').addClass('success');
      $('label.valid.success').remove();
   }
});

3）这就是事情 - 如果用户不是填写该表单并对自己进行身份验证，而是再次点击任何通过AJAX再次加载登录表单的元素the validation is not working anymore。

为什么？

我尝试使用$("#ajaxform").unbind('validate');然后使用$('#ajaxform').validate(...);，但没有成功。

Answer 1

问题是.validate()应该只在DOM上调用一次来初始化你想要的东西，而在你的情况下，它被再次调用已经初始化的东西，我的建议是黑客攻击不是问题的解决方案因为可能有更好的，但你可能喜欢它，当你显示从，当你显示登录层时禁用页面的其余部分，以防止用户点击其他任何地方。

Answer 2

好的，我已经弄清楚了。我的登录表单具有id='myForm属性。我已将其替换为class='myForm，并将验证码更改为

$('form.myForm').last().validate(
        {
            rules: {
                login: {
                    minlength: 2,
                    required: true
                },
                password: {
                    required: true,
                    minlength: 2
                }
            },
            highlight: function (element) {
                $(element).removeClass('success').addClass('error');
            },
            success: function (element) {
                element.addClass('valid').removeClass('error').addClass('success');
                $('label.valid.success').remove();
            }
        });

现在它正在运作，但在我看来，这不是最好的方法（但有时最终证明了手段的合理性）

jQuery验证和AJAX两次加载表单

2 个答案: