---
layout: default
title: Validation
title_tag: true
permalink: /examples/validation/
---
{%- capture single_select -%}
{%- endcapture -%}
{%- capture multiple_select -%}
{%- endcapture -%}
Valid fields
.was-validated
{% assign field_name = "valid-was-validated" %}
{% capture example_html %}
{% 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 %}
{% 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 %}