防止Firefox在表單首次加載時突出顯示“無效”（html5）復選框

Question

我正在使用webshim （ polyfill解決方案）對表單使用html5驗證。 Webshim對組復選框進行了驗證-您必須檢查組中的至少一個：（ 在這里 ，搜索data-grouprequired ）

我做了改進的驗證，其中還包括必須選中的最小和最大框。

這兩個工作（這里的工作小提琴與兩個），但在Firefox（不鍍鉻也不IE11）第一次加載頁面之后，“無效”復選框已經以紅色突出顯示，如只用Firefox給出fiddle-看到。

所以我的問題是：如何防止Firefox在頁面加載時突出顯示那些“無效”的內容？ （用戶甚至沒有機會填寫這些字段）

我創造了這個小提琴讓您可以輕松嘗試的事情： 小提琴

謝謝。

• 我添加了Webshim示例，以表明代碼中的“問題”（不同的行為）與firefox（圖片）的關系不大。

這是代碼：html：

<form action="#">
    <div class="form-row">
        <label>checkboxes with webshim groupRequired:</label>
        <div id="foo5">
            <input name="b" type="checkbox" data-grouprequired="" />
            <input name="b" type="checkbox" />
            <input name="b" type="checkbox" />
            <input name="b" type="checkbox" />
        </div>
    </div>
    <div class="form-row">
        <label>checkboxes with my custom min/max (min:2, max:3) :</label>
        <div id="foo">
            <input id="cb1" class="cb" name="a" data-max="3" data-min="2" type="checkbox" />
            <input id="cb2" class="cb" name="a" data-max="3" data-min="2" type="checkbox" />
            <input id="cb3" class="cb" name="a" data-max="3" data-min="2" type="checkbox" />
            <input id="cb4" class="cb" name="a" data-max="3" data-min="2" type="checkbox" />
        </div>
    </div>
    <div class="form-row">
        <label for="name">Name</label>
        <input class="foo3" type="text" id="name" required="" />
    </div>
    <div class="form-row">
        <input type="submit" />
    </div>
</form>

jQuery的：

 //webshim.setOptions
 webshim.setOptions("forms", {
     lazyCustomMessages: true,
     replaceValidationUI: true,
     customDatalist: "auto",
     addValidators: true

 });
 //request the features you need:
 webshim.polyfill('forms');

 $(function () {
     // use all implemented API-features on DOM-ready
     //webshim.activeLang(); //returns current set language

     webshim.activeLang('en'); //set locale to en

     i3 = 0;
     i4 = 0;
     first_arr = {};
     $('.cb').each(function (index, wrap) {
         first_arr[$(this).attr('id')] = ++i3;
         $(this).on('validatevalue', function (e, extra) {
             //failed fix attempt:
             if (false && first_arr[$(this).attr('id')] > 0) {
                 first_arr[$(this).attr('id')] = --i4;
                 return;
             }//end of failed fix attempt
             var elem = e.currentTarget;
             var min = $(e.currentTarget).data('min');
             var max = $(e.currentTarget).data('max');
             var total = $(elem).parents('#foo').find('input:checked').length;

             if (min && min > 0 && max && max > 0 && (total > max || total < min)) {
                 return 'Must select between ' + min + ' to ' + max;
             }
             if (min && min > 0 && total < min) {
                 return "can't select less than " + min;
             }
             if (max && max > 0 && total > max) {
                 return "can't select more than " + max;
             }
             $('.cb').not($(elem)).each(function () {
                 $(this).setCustomValidity("");
             });
         });
     });
 });

我還將添加Webshim如何進行自己的自定義，復選框組所需的驗證以及其github文件 ：

addCustomValidityRule('grouprequired', function(elem, val, data){
        var form, name;
        if(!('grouprequired' in data) || elem.type !== 'checkbox' || !(name = elem.name)){return;}

        if(!data.grouprequired.checkboxes){
            data.grouprequired = {};
            data.grouprequired.checkboxes = $( ((form = $.prop(elem, 'form')) && form[name]) || document.getElementsByName(name)).filter('[type="checkbox"]');
            data.grouprequired.checkboxes
                .off('click.groupRequired')
                .on('click.groupRequired', function(){
                    if((data.customMismatchedRule == 'grouprequired') == this.checked){
                        $(elem).trigger('updatevalidation.webshims');
                    }
                })
            ;

            data.grouprequired.checkboxes.not(elem).removeData('grouprequired');
        }

        return !(data.grouprequired.checkboxes.filter(':checked:enabled')[0]);
    }, 'Please check one of these checkboxes.');

Answer 1

嘗試：

input[type='checkbox']:invalid { box-shadow: none !important; }

請參閱： https ： //hacks.mozilla.org/2010/11/firefox-4-html5-forms/

在頁面上查找“：invalid”

您可能還需要：

input[type='checkbox']:required { box-shadow: none !important; }