Example custom template

[paulduran]

Hi,

Would you mind providing an example of a custom template? from what i can see, looking at the source.. the only thing passed in is valueAccessor() which seems to just be the value.

Ideally you'd receive an error message and the field name.

To test, currently i have a template:

        <span class="left field-validation-error">*</span>
    </script> 

and it does render the asterisk.. but it renders it regardless of whether the field is valid or not.

[ericmbarnard]

@paulduran

There is an example of a custom template at the top of the html section in this JsFiddle: http://jsfiddle.net/ericbarnard/KHFn8/

If you want to use a custom template, right now it requires that you at least use something like a validationMessage binding

Let me know if you have any further questions about templates!

[paulduran]

hi Eric, thanks for getting back to me so promptly. Sorry I didn't return the favour - i've been offline for a bit.

So it seems that: 1) can't just display an asterisk next to the fields that have errors 2) can't use a custom template somewhere that is not next to the field to display the errors.

What I was trying to do was have a validation summary section at the top.

eg: Field1: Must be a number Field3: This is a required field

and then further down:

Field1: [text input] Field2: [text input] Field3: [text input]

Is there no way to accomplish something like this?

[ericmbarnard]

@paulduran

Currently in order to get the asteriks, you have to either use a validationMessage binding or a template. Your other option would be to make your own binding and make that a central script for your project.

It would probably look something like this (pseudo-code):

ko.bindingHandlers.asterisk = {
    update: function(element, valueAccessor){
        var val = valueAccessor();
        if(!val.isModified()){
           return;
        }

        if(!val.isValid()){
            ko.bindingHandlers.text.update(element, function() { return "*"; });
        }
    }
};

And then apply that binding to <span></span> elements beside your input elements

[paulduran]

Hi Eric

Thanks for getting back to me with that suggestion. I'll give it a go over the weekend.

The other idea I has was modifying knockout validation to add a class to the input field if it was invalid.

Then I could add CSS rules to highlight the invalid field and/or add an asterisk with :after selectors.

Any idea if that would be very easy to implement?

Cheers Paul

Sent from my iPhone

On 23/03/2012, at 2:28 PM, Eric Barnardreply@reply.github.com wrote:

@paulduran

Currently in order to get the asteriks, you have to either use a validationMessage binding or a template. Your other option would be to make your own binding and make that a central script for your project.

It would probably look something like this (pseudo-code):

ko.bindingHandlers.asterisk = {
   update: function(element, valueAccessor){
       var val = valueAccessor();
       if(!val.isModified()){
          return;
       }

       if(!val.isValid()){
           ko.bindingHandlers.text.update(element, function() { return "*"; });
       }
   }
};

And then apply that binding to <span></span> elements beside your input elements

---

Reply to this email directly or view it on GitHub: https://github.com/ericmbarnard/Knockout-Validation/issues/28#issuecomment-4653000

[ericmbarnard]

@paulduran

That is currently already built in to the v1.0 source. It is the validationElement binding.

-Eric