--- layout: default title: Validation title_tag: true permalink: /examples/validation/4.0/ --- {%- capture single_select -%} {%- endcapture -%} {%- capture multiple_select -%} {%- endcapture -%}

Valid fields

.was-validated

{% assign field_name = "valid-was-validated" %} {% capture example_html %}
{{ single_select | replace: "single-select", field_name }}
{{ multiple_select | replace: "multiple-select", field_name }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-multiple-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), closeOnSelect: false, } ); {% endcapture %} {% include example.html %}

.is-valid

{% assign field_name = "valid-is-valid" %} {% capture example_html %}
{{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select is-valid" }}
{{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select is-valid" }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-multiple-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), closeOnSelect: false, } ); {% endcapture %} {% include example.html %}

Invalid fields

.was-validated

{% assign field_name = "invalid-was-validated" %} {% capture example_html %}
{{ single_select | replace: "single-select", field_name | replace: 'thing">', 'thing" required>' }}
{{ multiple_select | replace: "multiple-select", field_name | replace: "multiple>", "multiple required>" }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-multiple-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), closeOnSelect: false, } ); {% endcapture %} {% include example.html %}

.is-invalid

{% assign field_name = "invalid-is-invalid" %} {% capture example_html %}
{{ single_select | replace: "single-select", field_name | replace: "form-select", "form-select is-invalid" }}
{{ multiple_select | replace: "multiple-select", field_name | replace: "form-select", "form-select is-invalid" }}
{% endcapture %} {% capture example_js %} $( '#{{ field_name }}-single-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), } ); $( '#{{ field_name }}-multiple-field' ).select2( { theme: "bootstrap-5", width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style', placeholder: $( this ).data( 'placeholder' ), closeOnSelect: false, } ); {% endcapture %} {% include example.html %}