对于Select2 Jquery问题

这个问题是由于HTML5验证不能聚焦隐藏的无效元素。 我在处理jQuery Select2插件时遇到了这个问题。

解决方案 你可以在表单的每个元素上注入事件监听器和“无效”事件，这样你就可以在HTML5验证事件之前进行操作。

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

您可以尝试. removeattribute ("required")用于那些在窗口加载时隐藏的元素。因为很有可能由于javascript(选项卡表单)，所讨论的元素被标记为隐藏

e.g.

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

这应该可以完成任务。

这对我很管用……干杯

<input type="submit" name="btnSave" value="Update" id="btnSave" formnovalidate="formnovalidate">

formnovalidate=“formnovalidate”

有很多方法可以解决这个问题

添加novalidate到你的表单，但这是完全错误的，因为它将删除表单验证，这将导致用户输入错误的信息。

<表单操作=“....” class=“付款详细信息” 方法=“post” novalidate>

Use可以从必填字段中删除必填属性，这也是错误的，因为它将再次删除表单验证。 而不是这样:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="第一行地址" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="第一行地址" type="text">

当您不打算提交表单而不是执行其他选项时，Use可以禁用必填字段。这是我建议的解决方案。 如:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="第一行地址" type="text" disabled="disabled">

或者通过javascript / jquery代码禁用它取决于你的场景。

如果您有任何具有required属性的字段，但在表单提交期间不可见，则将抛出此错误。当您试图隐藏该字段时，只需删除所需的属性。如果您想再次显示该字段，您可以添加所需的属性。通过这种方式，您的验证将不会受到影响，同时，错误将不会抛出。

这是因为表单中有一个带有required属性的隐藏输入。

在我的情况下，我有一个选择框，它是隐藏的jquery tokenizer使用内联风格。如果我没有选择任何令牌，浏览器在表单提交时抛出上述错误。

所以，我用下面的css技术修复了它:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }