Validation Ideas

validation.stache

viewModel = {

  // Added implicitly
  validation: {
    comment: [],
    username: {
      required: "Username is required."
    }
  }


}

validateEmail(){
  
}

can.view.attr('validate', function(el, attrData) {
  // Check for validate-value
  value = el.attr('validate-value'); //--> username

  // validate-non-empty-string
  // validate-required

  var username: []

  // Check for validate-flag
  return validate;
});

validateValue(){

  
  return validateFlag;
}

<fancy-header-component>
  <error-messages></error-messages>
</fancy-header-component>


<child-component>

  <form action="" method="get" accept-charset="utf-8" can-submit="{validate}">

    <validation-messages>Show any validation messages here?</validation-messages>

    <input type="checkbox" name="" value="" 
      validate-required 
      validate-message="This is required">

    {{#childAttribute}}

      {{! Validate as you type. }}
      <input type="text" can-input="username" 
        can-blur="validate-validate"
        validate
        validate-value="{username}"
        validate-flag="{isUsernameErrors}" 
        validate-non-empty-string="User name should be a string" 
        validate-required="User name is required">
      {{#if isCommentValid}}
        <validation-message visible>{{#each isCommentValid}}{{/each}}</validation-message> 
      {{/if}}

    {{/childAttribute}}

    {{! Validate when you're done. }}
    <input type="text" can-value="comment" 
      can-blur="validate-validate"
      validate-value="{comment}"
      validate-flag="{../isCommentInvalid}" 
      validate-non-empty-string >
    {{#if isCommentInvalid}}
      <validation-message visible>{validationMessages.commentValidationMessage}</validation-message> 
    {{/if}}

    <button (click)="approve">
  </form>
</child-component>
attr.handler = function(el, options){
  var params = options.attr(); //{comment,isCommentValid}
  var context = options.scope.__context;
  context.attr(params[0]) // comment

  context.attr(params[1], true); // isCommentValid
}