Results 1 to 5 of 5

Thread: How to change failed validation styles

  1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Spokane Washington, USA
    Posts
    20

    Default How to change failed validation styles

    Instead of a red squiggly line at the bottom and an icon to the right I just want the entire field to have a red border and pale red background with hovering anywhere over the field will show the tooltip.

    validationerror.png

    I tried setting preventMark: true, but that makes all validation errors and tooltip go away.

    What are all the "states" named and how do I style each state per component id? Any pointers?

    Thanks

  2. #2
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410

    Default

    Have a look at:
    .x-form-invalid-field, textarea.x-form-invalid-field
    squiggly line: /resources/themes/images/default/grid/invalid_line.gif

    If you load a form with an invalid field and look at all the elements/CSS using FireBug/DeveloperTools, you will see the information needed.

    Regards,
    Scott.

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Spokane Washington, USA
    Posts
    20

    Default thanks

    thanks for the pointers scott
    just thought I'd post the solution I ended up using for other people searching for a way to remove the red squiggly line...

    .css
    Code:
    .x-form-invalid-field, textarea.x-form-invalid-field {
        background-image:none;
        background-color:#fdd;
        border-color:#c30;
    }
    screenshot
    modified-form-error.png

  4. #4
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410

    Default

    Thanks for the follow-up. Looks nice.

    Scott.

  5. #5

    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    364

    Default

    Quote Originally Posted by scottmartin View Post
    Thanks for the follow-up. Looks nice.

    Scott.
    Digging up an old post. If this is a combobox, can the trigger background match when the field is invalid?

    The userid field is how it works. I hard coded the password field to see how it should look.

    combobox-invalid.PNG

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •