Provide valuable, actionable feedback to your users with HTML5 form validation–available in all our supported browsers. Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
通過HTML5表單驗證為用戶提供有價值的、可操作的反饋信息-可在所有支持的瀏覽器中使用。可以選擇從瀏覽器的默認驗證反饋，或者使用我們內置類和starter javascript實現自定義消息。
How it works
工作原理
Here’s how form validation works with Bootstrap:
這是表單驗證功能在bootstrap中的工作原理：
- HTML form validation is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.
在HTML中表單驗證功能是通過CSS的兩個偽類：:invalid和:valid來應用的，它可以應用於<input>、<select>和<textarea>元素。
- Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>.
Bootstrap將:invalid和:valid偽類應用於父級元素，將.was-validated樣式通常應用於<form>元素。
- Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
另外，任何沒有輸入值的必填項顯示為無效。這樣以來，你就可以選擇什么時候激活他們（通常在用戶嘗試表單的提交行為時）。 - To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX),
重新渲染表單顯示的步驟（例如，在使用AJAX動態提交過表單時） - remove the .was-validated class from the <form> again after submission.
再次提交表單后從<form>元素上刪除.was-validated類 - As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation.
如果用在服務器端，則需要使用.is-invalid和.is-valid類來代替兩個偽類 - They do not require a .was-validated parent class.
並且不需要在父級元素使用.was-validated類 - Due to constraints in how CSS works,
由於CSS工作方式的限制 - we cannot (at present) apply styles to a <label> that comes before a form control in the DOM without the help of custom JavaScript.
如果沒有自定義Javascript的幫助，我們（目前）不能應用樣式到表單控件前面的<label>。 - All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.
所有現代瀏覽器都支持約束驗證API，一系列用於表單控件的JavaScript方法 - Feedback messages may utilize the browser defaults (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
反饋消息可以使用瀏覽器默認設置（不同瀏覽器的會有區別，且沒法使用CSS來修飾）或者使用我們基於傳統HTML和CSS自定義的反饋信息樣式。 - You may provide custom validity messages with setCustomValidity in JavaScript.
你可以在JavaScript中使用setCustomValidity提供自定義有效信息
With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.
考慮到這一點，請考慮以下關於：自定義表單驗證樣式、可選服務器端類和瀏覽器默認樣式的演示。
Custom styles
自定義樣式
For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>.
用於自定義bootstrap表單驗證信息、你可能需要增加novalidate布爾屬性到form標簽中。
This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript.
這將禁用瀏覽器默認反饋提示、但仍然提供通往javascript中的表單驗證API的訪問。
Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.
請嘗試提交下面的表單；我們的javascript將截聽提交按鈕並且把反饋轉達給你。當我們嘗試提交時、你將看到:invalid和:valid樣式被應用到你的表單控件上。
Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for <select>s are only available with .custom-select, and not .form-control.
自定義反饋信息樣式使用自定義顏色、邊框、獲取焦點時的樣式和背景圖標來更好的傳達反饋信息。用於select控件的背景圖標只適用於.custom-select，不適用於.form-control。
Customizing
自定義
Validation states can be customized via Sass with the $form-validation-states map.
驗證狀態可以在Sass中使用$form-validation-states map來自己定義。
Located in our _variables.scss file, this Sass map is looped over to generate the default valid/invalid validation states. Included is a nested map for customizing each state’s color and icon.
在_variables.scss文件中，這個Sass map被循環應用來生成默認的“有效/無效”驗證狀態。包括一個嵌套的map來自定義每個狀態的顏色和圖標。
While no other states are supported by browsers, those using custom styles can easily add more complex form feedback.
雖然瀏覽器不支持其他狀態，但使用自定義樣式的瀏覽器可以輕松添加更復雜的表單反饋。
Please note that we do not recommend customizing these values without also modifying the form-validation-state mixin.
請注意，我們不建議在不修改form-validation-state mixin的情況下自定義這些值。