Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,29 @@ default: undefined
---
---
##### shortDescription
Specifies whether the current form item is required.
Specifies if the current form item is required.

---
When this property is enabled, Form uses [RequiredRule](/api-reference/10%20UI%20Components/dxValidator/8%20Validation%20Rules/RequiredRule '/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/RequiredRule/') to validate the current item. The following values break **RequiredRule**:

- [Falsy JavaScript values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) except `0`, `-0`, `0n`, and `NaN`.
- Invalid values for the target editor (for example, a non-numeric string for the [NumberBox](/api-reference/10%20UI%20Components/dxNumberBox '/Documentation/ApiReference/UI_Components/dxNumberBox/') component).

[note]

If you specify validation rules using the [validationRules](/api-reference/10%20UI%20Components/dxForm/5%20Item%20Types/SimpleItem/validationRules.md '/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#validationRules') property, the **isRequired** property is ignored. In this case, use the [Require](/api-reference/10%20UI%20Components/dxValidator/8%20Validation%20Rules/RequiredRule '/Documentation/ApiReference/UI_Components/dxValidator/Validation_Rules/RequiredRule/') validation rule instead.
If you specify [validationRules](/api-reference/10%20UI%20Components/dxForm/5%20Item%20Types/SimpleItem/validationRules.md '/Documentation/ApiReference/UI_Components/dxForm/Item_Types/SimpleItem/#validationRules'), Form ignores the **isRequired** property. To implement **isRequired** functionality, specify a **RequiredRule** validation rule:

---
##### jQuery

<!--JavaScript-->
$(function() {
$("#formContainer").dxForm({
// ...
$('#formContainer').dxForm({
items: [{
// ...
validationRules: [
{ type: "required" }
{ type: 'required' }
]
},
// ...
]
}, ... ]
});
});

Expand All @@ -40,7 +41,7 @@ If you specify validation rules using the [validationRules](/api-reference/10%20
</dx-form>

<!--TypeScript-->
import { DxFormModule } from "devextreme-angular";
import { DxFormModule } from 'devextreme-angular/ui/form';
// ...
export class AppComponent {
// ...
Expand All @@ -57,14 +58,14 @@ If you specify validation rules using the [validationRules](/api-reference/10%20

<!-- tab: App.vue -->
<template>
<DxForm ...>
<DxSimpleItem ...>
<DxRequiredRule .../>
<DxForm ... >
<DxSimpleItem ... >
<DxRequiredRule ... />
</DxSimpleItem>
</DxForm>
</template>
<script>
import DxForm, { DxSimpleItem, DxRequiredRule } from 'devextreme-vue/form';
import { DxForm, DxSimpleItem, DxRequiredRule } from 'devextreme-vue/form';

export default {
components: {
Expand All @@ -79,9 +80,9 @@ If you specify validation rules using the [validationRules](/api-reference/10%20

<!-- tab: App.js -->
import React from 'react';
import Form, { SimpleItem, RequiredRule } from 'devextreme-react/form';
import { Form, SimpleItem, RequiredRule } from 'devextreme-react/form';

const App = () => {
function App () {
return (
<Form ...>
<SimpleItem ...>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ generateTypeLink:
---
---
##### shortDescription
A validation rule that demands that a validated field has a value.
A validation rule that rejects empty and invalid values.

---
Use this rule type to ensure the target editor value is specified. The rule will be broken in the following cases.
The following values break **RequiredRule**:

- If the validated value is **null**, **false**, or **undefined**.
- If the specified value has a type that is not expected for the target field (e.g., a string for the [DateBox](/api-reference/10%20UI%20Components/dxDateBox '/Documentation/ApiReference/UI_Components/dxDateBox/') UI component).
- [Falsy JavaScript values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) except `0`, `-0`, `0n`, and `NaN`.
- Invalid values for the target editor (for example, a non-numeric string for the [NumberBox](/api-reference/10%20UI%20Components/dxNumberBox '/Documentation/ApiReference/UI_Components/dxNumberBox/') component).

#include btn-open-demo with {
href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Validation/Overview/"
Expand Down
Loading