如何更改使用jquery默认所需的选择选项字段消息

Question

如何更改所需的选择选项字段的默认消息。它是WooCommerce产品的变体。我动态地添加了属性，并尝试更改消息，我的波纹管代码能够更改消息，但不起作用。它总是出现，不管是否有选定的值。

JsFiddle

HTML

<select id="color" class="" name="attribute_color" data-attribute_name="attribute_color"> 
    <option value="" selected="selected">Choose an option</option> 
    <option value="White" class="attached enabled">White</option> 
    <option value="Black" class="attached enabled">Black</option> 
</select> 

脚本

jQuery(document).ready(function($) { 

$('select#color').prop('required', true); 
    if(!$('select#color').has('value').length > 0) { 
    $('select#color').attr("oninvalid", "this.setCustomValidity('Please select a color')"); 
    }else{ 
    $('select#color').removeAttr("oninvalid", "this.setCustomValidity('Please select a color')"); 
    } 
}); 

JsFiddle

Answer 1

从MSDN文档：

约束API的element.setCustomValidity（） 的element.setCustomValidity（误差）方法被用于设置一个自定义的错误消息，当一个表单提交给被显示。该方法通过获取字符串参数错误来工作。如果错误是非空字符串，则该方法假定验证失败并将错误显示为错误消息。如果错误是空字符串，则该元素将被视为已验证并重置错误消息。

这意味着一旦你setCustomValidity错误输入将被视为无效，直到你不会通过传递空字符串重置它。

我在下面做的是检查何时发生select事件，并检查select是否有值，如果它没有，然后设置错误，如果它然后重置错误。

FIDDLE

jQuery(document).ready(function($) { 
    var selectColor = $('select#color'); 
    selectColor.prop('required', true); 
    /* Check if there is no selected value on ready if not mark select as invalid */ 
    if(!selectColor.val()){ 
     selectColor[0].setCustomValidity('Please select a color'); 
    } 
    /* Do the same check when select value changed */ 
    selectColor.on('change', function(){  
    if(!selectColor.val()){ 
     selectColor[0].setCustomValidity('Please select a color'); 
    }else{  
     selectColor[0].setCustomValidity(''); 
    }  
    }) 
});