Comprehensive validation library for Vue.js applications providing common validators with built-in error messages and customization options
87
{
"context": "This criteria evaluates the engineer's ability to properly use Vuelidate's validation state management features, specifically the $dirty, $error, and $invalid properties, to track user interactions and display validation feedback appropriately.",
"type": "weighted_checklist",
"checklist": [
{
"name": "useVuelidate composable",
"description": "Uses the useVuelidate() composable function from @vuelidate/core to set up validation",
"max_score": 15
},
{
"name": "Validation rules setup",
"description": "Properly configures validation rules using validators from @vuelidate/validators (required, email, minLength, maxLength, sameAs)",
"max_score": 20
},
{
"name": "$dirty state tracking",
"description": "Correctly accesses and uses the $dirty property to determine if a field has been interacted with",
"max_score": 20
},
{
"name": "$error state usage",
"description": "Uses the $error property to conditionally display validation errors only for touched fields",
"max_score": 20
},
{
"name": "$invalid state check",
"description": "Uses the $invalid property to check overall form or field validation status",
"max_score": 15
},
{
"name": "$touch method",
"description": "Calls the $touch() method to mark fields as dirty when appropriate (e.g., on form submission)",
"max_score": 10
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-vuelidate--validatorsdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10