AUR4200

Error Message

AUR4200: Validate behavior used on non property binding

Description

This error occurs when the & validate binding behavior is used on a binding type other than property bindings. The validate binding behavior is specifically designed to work with property bindings (like value.bind, checked.bind) and cannot be used with other binding types such as event bindings, template controllers, or other binding behaviors.

Common Scenarios

Using Validate on Event Bindings

<!-- ❌ Wrong: Validate behavior on event binding -->
<button click.trigger="save() & validate">Save</button>
<form submit.trigger="handleSubmit() & validate">

Using Validate on Template Controllers

<!-- ❌ Wrong: Validate behavior on template controllers -->
<div if.bind="isVisible & validate">Content</div>
<div repeat.for="item of items & validate">

Using Validate on Text Content

<!-- ❌ Wrong: Validate behavior on text interpolation -->
<span textcontent.bind="message & validate">Error</span>

Using Validate on Class/Style Bindings

<!-- ❌ Wrong: Validate behavior on class bindings -->
<div class.bind="cssClass & validate">Content</div>
<div style.bind="styles & validate">Content</div>

Solutions

1. Use Validate Only on Form Control Property Bindings

<!-- ✅ Correct: Validate on form control value bindings -->
<input type="text" value.bind="user.name & validate">
<input type="email" value.bind="user.email & validate">
<input type="checkbox" checked.bind="user.isActive & validate">
<select value.bind="user.country & validate">
  <option value="">Select Country</option>
  <option value="US">United States</option>
  <option value="CA">Canada</option>
</select>

2. Use Validation Controller for Programmatic Validation

import { ValidationController, ValidationControllerFactory } from '@aurelia/validation-html';

export class MyComponent {
  user = { name: '', email: '' };
  
  constructor(private validationControllerFactory: ValidationControllerFactory) {
    this.validationController = validationControllerFactory.createForCurrentScope();
  }
  
  async save() {
    // ✅ Correct: Programmatic validation instead of binding behavior on events
    const result = await this.validationController.validate();
    if (result.valid) {
      // Proceed with save
      this.performSave();
    }
  }
  
  private performSave() {
    // Save logic here
  }
}

3. Proper Template Structure with Validation

<!-- ✅ Correct: Comprehensive validation setup -->
<template>
  <form submit.trigger="save()">
    <div class="form-group">
      <label for="name">Name:</label>
      <input 
        id="name" 
        type="text" 
        value.bind="user.name & validate"
        class.bind="user.name | errorClass">
      <span class="error" if.bind="user.name | hasError">
        ${user.name | errorMessage}
      </span>
    </div>
    
    <div class="form-group">
      <label for="email">Email:</label>
      <input 
        id="email" 
        type="email" 
        value.bind="user.email & validate"
        class.bind="user.email | errorClass">
      <span class="error" if.bind="user.email | hasError">
        ${user.email | errorMessage}
      </span>
    </div>
    
    <button type="submit" disabled.bind="!isFormValid">
      Save
    </button>
  </form>
</template>

4. Custom Validation Triggers

<!-- ✅ Correct: Validate with specific triggers -->
<input 
  type="text" 
  value.bind="user.name & validate:blur"
  placeholder="Enter your name">

<input 
  type="email" 
  value.bind="user.email & validate:change"
  placeholder="Enter your email">

<!-- ✅ Correct: Manual validation trigger -->
<input 
  type="password" 
  value.bind="user.password & validate:manual"
  placeholder="Enter password">
<button click.trigger="validatePassword()">Validate Password</button>

export class MyComponent {
  
  validatePassword() {
    // Manually trigger validation for password field
    this.validationController.validateTrigger = ValidationTrigger.manual;
    this.validationController.validate({ object: this.user, propertyName: 'password' });
  }
}

Example: Complete Validation Setup

// user-form.ts
import { ValidationRules, ValidationController, ValidationControllerFactory } from '@aurelia/validation';
import { autoinject } from '@aurelia/kernel';

@autoinject
export class UserForm {
  user = { 
    name: '', 
    email: '', 
    age: null as number | null,
    isActive: false 
  };
  
  validationController: ValidationController;
  
  constructor(validationControllerFactory: ValidationControllerFactory) {
    this.validationController = validationControllerFactory.createForCurrentScope();
    this.setupValidation();
  }
  
  private setupValidation() {
    ValidationRules
      .ensure((u: typeof this.user) => u.name)
        .required()
        .minLength(2)
        .maxLength(50)
      .ensure((u: typeof this.user) => u.email)
        .required()
        .email()
      .ensure((u: typeof this.user) => u.age)
        .required()
        .min(18)
        .max(120)
      .on(this.user);
  }
  
  async save() {
    const result = await this.validationController.validate();
    if (result.valid) {
      console.log('User is valid, saving...', this.user);
      // Perform save operation
    } else {
      console.log('Validation errors:', result.results);
    }
  }
  
  get isFormValid() {
    return this.validationController.results.length === 0 ||
           this.validationController.results.every(r => r.valid);
  }
}

<!-- user-form.html -->
<template>
  <form submit.trigger="save()">
    <!-- ✅ Correct: Validate behavior only on property bindings -->
    <input 
      type="text" 
      value.bind="user.name & validate"
      placeholder="Name">
      
    <input 
      type="email" 
      value.bind="user.email & validate"
      placeholder="Email">
      
    <input 
      type="number" 
      value.bind="user.age & validate"
      placeholder="Age">
      
    <label>
      <input 
        type="checkbox" 
        checked.bind="user.isActive & validate">
      Active User
    </label>
    
    <!-- ✅ Correct: No validate behavior on submit event -->
    <button type="submit" disabled.bind="!isFormValid">
      Save User
    </button>
  </form>
</template>

Debugging Tips

1. Check Binding Type: Ensure & validate is only used on property bindings (value.bind, checked.bind, etc.)

2. Review Template: Look for validate behavior on event bindings or template controllers

3. Use Validation Controller: For complex validation scenarios, use the validation controller programmatically

4. Validate Binding Syntax: Make sure the binding syntax follows the correct pattern

Related Errors

• AUR4201 - Validate binding behavior extraneous args

• AUR4202 - Validate binding behavior invalid trigger name

• AUR4204 - Validate binding behavior invalid binding target