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

MSDNのドキュメントから3210

Answer 1

：

制約APIのelement.setCustomValidity（） はelement.setCustomValidity（エラー）メソッドは、フォームが送信された場合に表示されるカスタムエラーメッセージを設定するために使用されます。このメソッドは、文字列パラメータのエラーを取ります。 errorが空でない文字列の場合、このメソッドは検証が失敗したとみなし、エラーメッセージとしてエラーを表示します。 errorが空文字列の場合、要素は検証されたと見なされ、エラーメッセージがリセットされます。

これは、一度setCustomValidityエラーが発生した場合、空の文字列を渡してリセットするまで入力が無効とみなされることを意味します。

選択イベントが発生したときにチェックし、エラーがリセットされた場合にエラーを設定しない場合、選択に値があるかどうかを確認することです。

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(''); 
    }  
    }) 
});