P
CUI v1.20.1177
Documentation and examples in using the Custom String Validation with PCUI and Vee Validate
<script src="~/PCUIAssets/PCUI/Config/VueConfig.js"></script>
<script src="~/PCUIAssets/Vue/Plugins/VeeValidate.min.js"></script>
This demo shows only for custom validation checking if both strings are the same.
You can customize your own validation by editing the "validate" function that can be seen in the Demo script.
Note: Render in this file the Demo script and Config.
<label>Enter custom validation message:</label>
<input v-model="customErrorMsg" />
<label>Default string:</label>
<input v-model="defaultString" type="text">
<label>String comparison:</label>}
<input v-validate="'required|mycustomvalidation'" name="stringmatch" type="text">
<span>{ { errors.first('stringmatch') } }</span>
var stringValidationDemoDOM = new Vue({
name: 'String Validation Demo',
el: '#string-validation-demo',
data: {
defaultString: {{ defaultString }},
customErrorMsg: {{ customErrorMsg }}
},
});
function myCustomValidator() {
stringValidationDemoDOM.$validator.extend('mycustomvalidation', {
getMessage: function (field, args) { // edit this function to return your custom error message
return stringValidationDemoDOM.customErrorMsg;
},
validate: function (value, args) { // edit this function depending on your custom validation
return value.toLowerCase().trim() === stringValidationDemoDOM.defaultString.toLowerCase().trim();
}
});
}
myCustomValidator();
stringValidationDemoDOM.$validator.localize('en', veedictionary);
Note:The last line adds your custom validation to VeeValidate.
const veedictionary = {
custom: {
stringmatch: {
required: 'Error message from config'
}
}
};
Note: You can add a custom rule and its own message in the config. For example, add this line under 'required'
mycustomrule: 'My custom message from config'