Question

我正在使用以下代码验证表单：

$('#wpcf7-f96-o1 form').submit(function(e){
    e.preventDefault();
    var data = [
        '[name="text-854"]',
        '[name="text-855"]',
        '[name="text-856"]',
        '[name="email-375"]'
    ]
    $.each(data, function(key, value) {
        if($('input'+value).val() == ''){
            $('input'+value).css({'border':'1px solid red'})
            valid = false
        } else {
            $('input'+value).css({'border':'1px solid #888'})
            valid = true
        }
    })
    if(valid){
        $('#wpcf7-f96-o1 form').submit()
        $('.form_success').css({'display':'block'});
        return false;
    } else {
        $('.form_error').css({'display':'block'});
        return false;
    }
});

从阅读堆栈溢出这个问题我明白它可能是一个无限循环...我只是不确定我做错了什么。

谢谢！

Answer 1

错误是因为您在提交事件处理程序中触发提交事件并以无限循环结束。

如果有效，则我希望表单提交（所有字段都有值）

如果是这种情况，您应该从其当前位置移动e.preventDefault()，并且仅在valid不成立时才调用它。试试这个：

$('#wpcf7-f96-o1 form').submit(function(e) {
    var data = [
        '[name="text-854"]',
        '[name="text-855"]',
        '[name="text-856"]',
        '[name="email-375"]'
    ];

    $.each(data, function(key, value) {
        if($('input' + value).val() == ''){
            $('input' + value).css({ 'border': '1px solid red' })
            valid = false
        } else {
            $('input' + value).css({ 'border': '1px solid #888' })
            valid = true
        }
    });

    if (valid) {
        $('.form_success').show();
    } else {
        e.preventDefault(); // stop the form submission here
        $('.form_error').show();
    }
});

另请注意，添加/删除外部样式表中定义的类比通过css()方法添加自定义规则更好。

jQuery最大调用堆栈大小超过

1 个答案: