Skip to content

Commit

Permalink
Form Validation Demo: update editors' settings to make reset button…
Browse files Browse the repository at this point in the history
… behavior more intuitive (#2870)

* veliueChangeEvent for editors changed to keyup, confirm dataField specified, applyCustomValue for dateboxes chagned to false

* formatting fixed

* lint

* options renaming
  • Loading branch information
AlexanderMoiseev authored Sep 29, 2023
1 parent aafac4e commit 5df56e7
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 46 deletions.
23 changes: 8 additions & 15 deletions JSDemos/Demos/Form/Validation/Angular/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
validationGroup="customerData"
>
<dxi-item itemType="group" caption="Credentials">
<dxi-item dataField="Email">
<dxi-item dataField="Email" [editorOptions]="emailEditorOptions">
<dxi-validation-rule type="required" message="Email is required">
</dxi-validation-rule>
<dxi-validation-rule type="email" message="Email is invalid">
Expand All @@ -21,14 +21,15 @@
>
</dxi-validation-rule>
</dxi-item>
<dxi-item dataField="Password" [editorOptions]="passwordOptions">
<dxi-item dataField="Password" [editorOptions]="passwordEditorOptions">
<dxi-validation-rule type="required" message="Password is required">
</dxi-validation-rule>
</dxi-item>
<dxi-item
name="ConfirmPassword"
editorType="dxTextBox"
[editorOptions]="confirmOptions"
dataField="ConfirmPassword"
[editorOptions]="confirmPasswordEditorOptions"
>
<dxo-label text="Confirm Password"> </dxo-label>
<dxi-validation-rule
Expand All @@ -45,7 +46,7 @@
</dxi-item>
</dxi-item>
<dxi-item itemType="group" caption="Personal Data">
<dxi-item dataField="Name">
<dxi-item dataField="Name" [editorOptions]="nameEditorOptions">
<dxi-validation-rule type="required" message="Name is required">
</dxi-validation-rule>
<dxi-validation-rule
Expand All @@ -58,11 +59,7 @@
<dxi-item
dataField="Date"
editorType="dxDateBox"
[editorOptions]="{
placeholder: 'Birth Date',
invalidDateMessage:
'The date must have the following format: MM/dd/yyyy'
}"
[editorOptions]="dateBoxOptions"
>
<dxo-label text="Date of birth"> </dxo-label>
<dxi-validation-rule
Expand Down Expand Up @@ -114,18 +111,14 @@
<dxi-validation-rule type="required" message="City is required">
</dxi-validation-rule>
</dxi-item>
<dxi-item dataField="Address">
<dxi-item dataField="Address" [editorOptions]="addressEditorOptions">
<dxi-validation-rule type="required" message="Address is required">
</dxi-validation-rule>
</dxi-item>
<dxi-item
dataField="Phone"
helpText="Enter the phone number in USA phone format"
[editorOptions]="{
mask: '+1 (X00) 000-0000',
maskRules: phoneRules,
maskInvalidMessage: 'The phone must have a correct USA phone format'
}"
[editorOptions]="phoneEditorOptions"
>
<dxi-validation-rule
type="pattern"
Expand Down
35 changes: 31 additions & 4 deletions JSDemos/Demos/Form/Validation/Angular/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,9 @@ const sendRequest = function (value) {
export class AppComponent {
@ViewChild(DxFormComponent, { static: false }) form:DxFormComponent;

passwordOptions: any = {
passwordEditorOptions: any = {
mode: 'password',
valueChangeEvent: 'keyup',
onValueChanged: () => {
let editor = this.form.instance.getEditor('ConfirmPassword');
if (editor.option('value')) {
Expand All @@ -61,8 +62,30 @@ export class AppComponent {
],
};

confirmOptions: any = {
emailEditorOptions: any = {
valueChangeEvent: 'keyup',
};

nameEditorOptions: any = {
valueChangeEvent: 'keyup',
};

addressEditorOptions: any = {
valueChangeEvent: 'keyup',
};

phoneEditorOptions: any = {
mask: '+1 (X00) 000-0000',
maskRules: {
X: /[02-9]/,
},
maskInvalidMessage: 'The phone must have a correct USA phone format',
valueChangeEvent: 'keyup',
};

confirmPasswordEditorOptions: any = {
mode: 'password',
valueChangeEvent: 'keyup',
buttons: [
{
name: 'password',
Expand Down Expand Up @@ -99,13 +122,17 @@ export class AppComponent {

phonePattern: any = /^[02-9]\d{9}$/;

phoneRules: any = {
X: /[02-9]/,
dateBoxOptions = {
placeholder: 'Birth Date',
acceptCustomValue: false,
invalidDateMessage:
'The date must have the following format: MM/dd/yyyy',
};

dateRangeBoxOptions = {
startDatePlaceholder: 'Start Date',
endDatePlaceholder: 'End Date',
acceptCustomValue: false,
invalidDateMessage:
'The date must have the following format: MM/dd/yyyy',
};
Expand Down
26 changes: 22 additions & 4 deletions JSDemos/Demos/Form/Validation/React/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,29 @@ const checkBoxOptions = {

const cityEditorOptions = {
dataSource: service.getCities(),
valueChangeEvent: 'keyup',
minSearchLength: 2,
};

const countryEditorOptions = {
dataSource: service.getCountries(),
};

const emailEditorOptions = {
valueChangeEvent: 'keyup',
};

const nameEditorOptions = {
valueChangeEvent: 'keyup',
};

const addressEditorOptions = {
valueChangeEvent: 'keyup',
};

const phoneEditorOptions = {
mask: '+1 (X00) 000-0000',
valueChangeEvent: 'keyup',
maskRules: {
X: /[02-9]/,
},
Expand All @@ -54,13 +68,15 @@ const maxDate = new Date().setFullYear(new Date().getFullYear() - 21);

const dateBoxOptions = {
placeholder: 'Birth Date',
acceptCustomValue: false,
invalidDateMessage:
'The date must have the following format: MM/dd/yyyy',
};

const dateRangeBoxOptions = {
startDatePlaceholder: 'Start Date',
endDatePlaceholder: 'End Date',
acceptCustomValue: false,
invalidDateMessage: 'The date must have the following format: MM/dd/yyyy',
};

Expand Down Expand Up @@ -101,6 +117,7 @@ function App() {

const getPasswordOptions = React.useCallback(() => ({
mode: 'password',
valueChangeEvent: 'keyup',
onValueChanged: () => {
const editor = formInstance.current.getEditor('ConfirmPassword');
if (editor.option('value')) {
Expand All @@ -123,6 +140,7 @@ function App() {

const getConfirmOptions = React.useCallback(() => ({
mode: 'password',
valueChangeEvent: 'keyup',
buttons: [
{
name: 'password',
Expand Down Expand Up @@ -175,7 +193,7 @@ function App() {
validationGroup="customerData"
>
<GroupItem caption="Credentials">
<SimpleItem dataField="Email" editorType="dxTextBox">
<SimpleItem dataField="Email" editorType="dxTextBox" editorOptions={emailEditorOptions}>
<RequiredRule message="Email is required" />
<EmailRule message="Email is invalid" />
<AsyncRule
Expand All @@ -185,7 +203,7 @@ function App() {
<SimpleItem dataField="Password" editorType="dxTextBox" editorOptions={getPasswordOptions()}>
<RequiredRule message="Password is required" />
</SimpleItem>
<SimpleItem name="ConfirmPassword" editorType="dxTextBox" editorOptions={getConfirmOptions()}>
<SimpleItem name="ConfirmPassword" dataField="ConfirmPassword" editorType="dxTextBox" editorOptions={getConfirmOptions()}>
<Label text="Confirm Password" />
<RequiredRule message="Confirm Password is required" />
<CompareRule
Expand All @@ -195,7 +213,7 @@ function App() {
</SimpleItem>
</GroupItem>
<GroupItem caption="Personal Data">
<SimpleItem dataField="Name">
<SimpleItem dataField="Name" editorOptions={nameEditorOptions}>
<RequiredRule message="Name is required" />
<PatternRule message="Do not use digits in the Name"
pattern={/^[^0-9]+$/} />
Expand Down Expand Up @@ -225,7 +243,7 @@ function App() {
<StringLengthRule min={2} message="City must have at least 2 symbols" />
<RequiredRule message="City is required" />
</SimpleItem>
<SimpleItem dataField="Address">
<SimpleItem dataField="Address" editorOptions={addressEditorOptions}>
<RequiredRule message="Address is required" />
</SimpleItem>
<SimpleItem dataField="Phone"
Expand Down
39 changes: 32 additions & 7 deletions JSDemos/Demos/Form/Validation/Vue/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@
validation-group="customerData"
>
<DxGroupItem caption="Credentials">
<DxSimpleItem data-field="Email">
<DxSimpleItem
data-field="Email"
:editor-options="emailEditorOptions"
>
<DxRequiredRule message="Email is required"/>
<DxEmailRule message="Email is invalid"/>
<DxAsyncRule
Expand All @@ -24,14 +27,15 @@
/>
</DxSimpleItem>
<DxSimpleItem
:editor-options="passwordOptions"
:editor-options="passwordEditorOptions"
data-field="Password"
>
<DxRequiredRule message="Password is required"/>
</DxSimpleItem>
<DxSimpleItem
name="ConfirmPassword"
:editor-options="confirmPasswordOptions"
data-field="ConfirmPassword"
:editor-options="confirmPasswordEditorOptions"
editor-type="dxTextBox"
>
<DxLabel text="Confirm Password"/>
Expand All @@ -43,7 +47,10 @@
</DxSimpleItem>
</DxGroupItem>
<DxGroupItem caption="Personal Data">
<DxSimpleItem data-field="Name">
<DxSimpleItem
data-field="Name"
:editor-options="nameEditorOptions"
>
<DxRequiredRule message="Name is required"/>
<DxPatternRule
:pattern="namePattern"
Expand Down Expand Up @@ -94,7 +101,10 @@
/>
<DxRequiredRule message="City is required"/>
</DxSimpleItem>
<DxSimpleItem data-field="Address">
<DxSimpleItem
data-field="Address"
:editor-options="addressEditorOptions"
>
<DxRequiredRule message="Address is required"/>
</DxSimpleItem>
<DxSimpleItem
Expand Down Expand Up @@ -217,8 +227,9 @@ export default {
md: 2,
lg: 2,
},
passwordOptions: {
passwordEditorOptions: {
mode: 'password',
valueChangeEvent: 'keyup',
onValueChanged: () => {
const editor = this.formInstance.getEditor('ConfirmPassword');
if (editor.option('value')) {
Expand All @@ -238,8 +249,9 @@ export default {
},
],
},
confirmPasswordOptions: {
confirmPasswordEditorOptions: {
mode: 'password',
valueChangeEvent: 'keyup',
buttons: [
{
name: 'password',
Expand All @@ -252,14 +264,25 @@ export default {
},
],
},
emailEditorOptions: {
valueChangeEvent: 'keyup',
},
nameEditorOptions: {
valueChangeEvent: 'keyup',
},
addressEditorOptions: {
valueChangeEvent: 'keyup',
},
dateBoxOptions: {
placeholder: 'Birth Date',
acceptCustomValue: false,
invalidDateMessage:
'The date must have the following format: MM/dd/yyyy',
},
dateRangeBoxOptions: {
endDatePlaceholder: 'End Date',
startDatePlaceholder: 'Start Date',
acceptCustomValue: false,
invalidDateMessage:
'The date must have the following format: MM/dd/yyyy',
},
Expand All @@ -270,13 +293,15 @@ export default {
},
phoneEditorOptions: {
mask: '+1 (X00) 000-0000',
valueChangeEvent: 'keyup',
maskRules: {
X: /[02-9]/,
},
maskInvalidMessage: 'The phone must have a correct USA phone format',
},
cityEditorOptions: {
dataSource: service.getCities(),
valueChangeEvent: 'keyup',
minSearchLength: 2,
},
countryEditorOptions: {
Expand Down
Loading

0 comments on commit 5df56e7

Please sign in to comment.