You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* <ahref="https://codesandbox.io/s/v3wq0llmo3">Example of online demo form playground</a>
27
+
* <ahref="https://codesandbox.io/s/pjom8r78x7">Example of custom control</a>(when ```check: false```)
28
+
* <ahref="https://codesandbox.io/s/1r77ozkrk7">Example of custom function</a>(when providing ```customFunc```)
29
29
* <ahref="https://codesandbox.io/s/custom-function-further-control-when-providing-customfunc-yjwch">Custom function further control</a>(when providing ```customFunc```)
* <ahref="https://codesandbox.io/s/q9vqmk4j84">Example of custom locales</a>(when providing ```window.REACT_INPUTS_VALIDATION['customErrorMessage']```)
31
+
* <ahref="https://codesandbox.io/s/13qo2rqxjj">Example of phone and email validation</a>(handled with ```customFunc```)
32
+
* <ahref="https://codesandbox.io/s/async-checking-via-customfunc-emqgw">Example of async checking username existence </a>(Async checking for ```<Textbox>``` and ```<Textarea>``` only. Handled with ```customFunc```)
33
+
* <ahref="https://codesandbox.io/s/asyncmsgobj-blmce">Example of asyncMsgObj </a>(when providing ```asyncMsgObj```)
[Custom Error Message Guid(can be multiple locales)](#custom-error-message)
46
47
47
-
[Phone and email validation example](#phone-email-validation-example)(Since the phone and email validation are no longer handled internally after v1.4.0.)
48
+
[Example of phone and email validation](#phone-email-validation-example)(Since the phone and email validation are no longer handled internally after v1.4.0.)
48
49
49
50
# Installation
50
51
```sh
@@ -94,15 +95,15 @@ Tested on IE9+ and Chrome and Safari(10.0.3)
94
95
|**validationOption.max**|**Opt**|**Num**|**Validation of max length when validationOption['type'] is string, max amount when validationOption['type'] is number.**|**0**|
95
96
|**validationOption.length**|**Opt**|**Num**|**Validation of exact length of the value.**|**0**|
96
97
|**validationOption.compare**|**Opt**|**Str**|**Compare this value to 3 to see if they are equal.**|**""**|
97
-
|**<aname="customFunc"></a>validationOption.customFunc**|**Opt**|**Func**|**Custom function. Returns true or err message.**|**none**|
98
+
|**<aname="customFunc"></a>validationOption.customFunc**|**Opt**|**Func**|**Custom function. Returns true or err message or { error: true, message: 'message', showOnSuccess: true }.**|**none**|
|**validationOption.locale**|**Opt**|**Str**|**For error message display. Current options are ['zh-CN', 'en-US']; Default is 'en-US'. If your are looking for more options, you can take a look at '[window.REACT_INPUTS_VALIDATION](#custom-error-message)' section, which provides the extensibility for your own locale.**|**"en-US"**|
101
-
|~~**validationOption.phoneCountry**~~|~~**Opt**~~|~~**Str**~~|~~**Useful when the validationOption['type'] is phone. Check if the phone number matchs en-US phone number format.**~~ <br><br>**No longer support after v1.4.0. For phone or email address validation please reffer to '[Phone and email validation example](#phone-email-validation-example)'**|~~**"en-US"**~~|
102
+
|~~**validationOption.phoneCountry**~~|~~**Opt**~~|~~**Str**~~|~~**Useful when the validationOption['type'] is phone. Check if the phone number matchs en-US phone number format.**~~ <br><br>**No longer support after v1.4.0. For phone or email address validation please reffer to '[Example of phone and email validation](#phone-email-validation-example)'**|~~**"en-US"**~~|
102
103
|**validationOption.msgOnError**|**Opt**|**Str**|**Show your custom error message no matter what(except the message from customFunc) when it has error if it is provied.**|**""**|
103
104
|**validationOption.msgOnSuccess**|**Opt**|**Str**|**Show your custom success message no matter what when it has error if it is provied.**|**""**|
|**asyncMsgObj.message**|**Opt**|**Str**|**(Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST'**|**""**|
106
+
|**asyncMsgObj.message**|**Opt**|**Str**|**(Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST' (For Textbox or Textarea, better reffer to <ahref="https://codesandbox.io/s/async-checking-via-customfunc-emqgw">Example of async checking username existence </a>**|**""**|
106
107
|**asyncMsgObj.showOnError**|**Opt**|**Bool**|**(Server response) Show AJAX error message or not.**|**true**|
107
108
|**asyncMsgObj.showOnSuccess**|**Opt**|**Bool**|**(Server response) Show AJAX success message or not.**|**false**|
// locale: 'en-US', //Optional.[String].Default: "en-US". For error message display. Current options are ['zh-CN', 'en-US']; Default is 'en-US'. If your are looking for more options, you can take a look at 'window.REACT_INPUTS_VALIDATION' section, which provides the extensibility for your own locale.
153
154
// msgOnError: "Your custom error message if you provide the validationOption['msgOnError']", //Optional.[String].Default: "" Show your custom error message no matter what(except the message from customFunc) when it has error if it is provied.
154
155
// msgOnSuccess: "Your custom success message if you provide the validationOption['msgOnSuccess']. Otherwise, it will not show, not even green border.", //Optional.[String].Default: "". Show your custom success message no matter what when it has error if it is provied.
155
-
// customFunc: res => { //Optional.[Func].Default: none. Custom function. Returns true or err message
156
+
// customFunc: res => { //Optional.[Func].Default: none. Custom function. Returns true or err message or { error: true, message: 'message', showOnSuccess: true }
156
157
// if (res != 'milk') {
157
158
// return 'Description cannot be other things but milk';
|**validationOption.locale** |**Opt**|**Str** |**For error message display. Current options are ['zh-CN', 'en-US']; Default is 'en-US'. If your are looking for more options, you can take a look at '[window.REACT_INPUTS_VALIDATION](#custom-error-message)' section, which provides the extensibility for your own locale.**|**"en-US"** |
506
507
|**validationOption.msgOnError** |**Opt**|**Str** |**Show your custom error message no matter what(except the message from customFunc) when it has error if it is provied.**|**""** |
507
508
|**validationOption.msgOnSuccess** |**Opt**|**Str** |**Show your custom success message no matter what when it has error if it is provied.**|**""** |
|**asyncMsgObj.message** |**Opt**|**Str** |**(Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST'**|**""** |
510
+
|**asyncMsgObj.message** |**Opt**|**Str** |**(Server response) Your AJAX message. For instance, provide it when backend returns 'USERNAME ALREADY EXIST' (For Textbox or Textarea, better reffer to <a href="https://codesandbox.io/s/async-checking-via-customfunc-emqgw">Example of async checking username existence </a>**|**""** |
510
511
|**asyncMsgObj.showOnError** |**Opt**|**Bool** |**(Server response) Show AJAX error message or not.**|**true** |
511
512
|**asyncMsgObj.showOnSuccess** |**Opt**|**Bool** |**(Server response) Show AJAX success message or not.**|**false** |
// msgOnError: "Your custom error message if you provide the validationOption['msgOnError']", //Optional.[String].Default: "". Show your custom error message no matter what(except the message from customFunc) when it has error if it is provied.
558
559
// msgOnSuccess: "Your custom success message if you provide the validationOption['msgOnSuccess']. Otherwise, it will not show, not even green border.", //Optional.[String].Default: "". Show your custom success message no matter what when it has error if it is provied.
559
-
// customFunc: res => { //Optional.[Func].Default: none. Custom function. Returns true or err message
560
+
// customFunc: res => { //Optional.[Func].Default: none. Custom function. Returns true or err message or { error: true, message: 'message', showOnSuccess: true }
560
561
// if (res != 'banana') {
561
562
// return 'Description cannot be other things but banana';
0 commit comments