简单jQuery表单验证:由于占位符polyfill，在ie9中检查empty.val()失败

Question

新问题/答案

我使用的是HTML5占位符polyfill，它导致ie9将输入的占位符文本设置为值。因此，在HTML5浏览器中，val属性为空，而在下面的代码中，ie9将其视为已填充

---

我使用jQuery来确保所有字段都已填写。这在ie10、webkit和mozilla中运行良好，但在ie9中失败。

我做错了什么，为什么这段代码不能在ie9中工作？

谢谢！

$('#quoteform .button.next').on('click',function(){
    var $me = $(this),
        $myParent = $me.parent(),
        $nextStep = $myParent.nextAll('fieldset:not(.disabled)').first(),
        validate;
    // If we're on step2, make sure all fields are filled in            
    if($me.is('#quote-step2 .button') || $me.is('#quote-step1 .button')) {
        $me.parents('fieldset').find('input:visible').each(function(){
            var $me = $(this),
                myVal = this.value;
            if(myVal === '') {
                $me.parent().addClass('warning');
                validate = false;
                return;             
            } else {
                if(typeof validate === 'undefined')
                    validate = true;
            }
        });
    }
    if(validate === false) {
        alert('Please fill out all fields before continuing.');
        return false;
    }
    switchView($nextStep, $myParent);
});

Answer 1

我遇到了类似的问题，我的解决方法是除了测试空值外，还根据占位符字符串测试值。由于polyfill将输入的值替换为占位符字符串，因此空值是IE9中占位符的值。

    $me.parents('fieldset').find('input:visible').each(function(){
        var $me = $(this),
            myVal = this.value,
            myPlaceholder = $me.attr('placeholder');
        if(myVal === '' || myVal === myPlaceholder) {
            $me.parent().addClass('warning');
            validate = false;
            return;             
        } else {
            if(typeof validate === 'undefined')
                validate = true;
        }
    });