Question

我有一个表单，从最终用户收集一些个人信息并触发一些JS验证功能。对于简单的示例，我们只需说明表单的名字，姓氏和电子邮件地址。

现在填写并提交表单后，如果我回到它，我的浏览器会预先填充表单，就像您期望的那样。问题是，当我去提交（不更改任何字段或通过它们进行标记）时，插件不会返回并验证这些字段（如果它们已经预先填充。

我不确定为什么它没有验证预先填充的字段。而且我不确定如何得到它。有没有人有任何想法？我正在运行最新版本的jQuery和validate插件（http://jqueryvalidation.org/）。

示例代码：

$(document).ready(function() {
    var rules = {
        FirstName: 'required',
        LastName: 'required',
        EmailAddress: {
            required: true,
            customEmail: true,
            checkAccountExists: true
        }
    };

    //And field specific (and even validation type specific) error messages
    var messages = {
        FirstName: 'Your first name is required.',
        LastName: 'Your last name is required.',
        EmailAddress: {
            required: 'Your email address is required.',
            customEmail: 'You must enter a valid email address.',
            checkAccountExists: 'We already have an account with that email address. Please login.'
        }
    };

    $('#applicationForm').validate({
        //debug: true,
        rules: rules,
        messages: messages,
        errorElement: 'span'
    });
});

jQuery.validator.addMethod('customEmail', function(value, element) {
    return this.optional(element) || /[A-z0-9._%-+]{1,}@[A-z0-9._%-]{1,}\.[A-z0-9._%-]{1,}/.test(value);
}, 'Invalid email address entered.');


jQuery.validator.addMethod('checkAccountExists', function(value, element) {
    if (this.optional(element)) {
        return true;
    }

    var url = $(element).attr('checkEmailUrl');

    $.ajax({
        type: 'GET',
        data: {EmailAddress: value, check: true},
        dataType: 'json',
        url: url,
        success: function(response) {
            var dataArray = jQuery.parseJSON(response);

            //If it exists then trigger the popup
            if (dataArray.result == 'EXISTS') {
                kclHelpers.showEmailExistsModal(value);
            }
        }
    });

    return true; //If it exists the popup will handle it. We are just using this to trigger it
}, 'An account under the specified email address already exists. Please sign in.');

Answer 1

我使用的一个简单解决方案就是触发已经绑定到要验证的元素的模糊事件。您可以检查每个元素的值，以确定是否应该验证它们，以防止此操作在用户交互之前触发它们。

$(window).load(function() {
    //pre-highlight fields with values
    $('input[type=text], input[type=email], input[type=url], input[type=password], select').filter(function() {
        return $.trim($(this).val()) != '';
    }).blur();
});

如何让jQuery验证以验证浏览器预先填充的字段

1 个答案: