changing default validation functionality

I am using vaadin in a portlet environment where we have specific validation look & feel and behavior.

When input field
have invalid values,
1) their borders color becomes red.
2) All the error messages (as link) are shown above or below at common location.
3) Clicking on specific error results into cursor focus going to related field.

So how can i achieve this functionality and what i need to change & modify.

It is mostly a matter of changing the CSS. For example, if a textfield gets an error notification, it also gets an additional CSS class identifier called .v-textfield-error. For example turning the borders red should be produced by adding this to the theme:

.v-textfield-error {
  border-color: red;

Getting all the messages at one place is a feature forms, but I think you should handle this manually as you want them to be clickable. You should be able to gather all error messages by calling getErrorMessage on those fields that don’t validate. You can turn them into buttons or links with a specific theme and show them all at the same place. Clicking on one of these buttons would call field.focus() on the field producing the error.

Also how can i remove those red buttons in front of text field with invalid values ?

you mean those red exlamation marks which give the error message when you hoover them, visible here:

They have the classname .v-errorindicator so if you really want to remove them then give the class display:none or visibility: hidden. This will remove them from the whole app. If you want to remove them only from one layout then give the layout a style name and make the css more specific, like .my-layout .v-errorindicator { display: none }.