1

I'm making an admin input panel.

Admin will have an option to create a custom color using an hexadecimal value such as #0000ff or #008000, etc.

Right now, I´m using this in my model:

[Required(AllowEmptyStrings = false, ErrorMessage = "Please enter the color")]
public string Color { get; set; }

How can I validate so the admin can only put hexadecimal values here?

And most importantly, is this really necessary? I heard that the browser tends to ignore false hex codes Why does HTML think “chucknorris” is a color?

Koni
  • 452
  • 1
  • 7
  • 19
  • 2
    You write javascript that validates the input. There is no one way to do it. Try it out and if something goes wrong, [edit] your question to add a JavaScript/HTML/CSS snippet with details about why it isn't working. –  Aug 03 '17 at 18:11
  • 1
    See this but note it requires browser support, and note this is client side only, it doesn't have anything to do with validating server side: https://stackoverflow.com/questions/17414348/html-5-hex-string-for-pattern-attribute – AaronLS Aug 03 '17 at 18:13
  • You could use an existing javascript based control with browser side validation. [There are enough out there](https://www.google.com/search?q=javascript+color+picker+control). – Igor Aug 03 '17 at 18:13
  • 2
    I don't see why someone would vote this questions as "Too Broad". It's about as specific as a question about validation can get. – AaronLS Aug 03 '17 at 18:14
  • I see, so I need to do this via javascript. I though there was a way to do it server side =/ – Koni Aug 03 '17 at 18:19
  • You validate both sides. But the client-side makes for a better user experience. – Jasen Aug 03 '17 at 18:20
  • Yeah, everything in my app has both validations, but I am not understanding how to validate this on the server side too. – Koni Aug 03 '17 at 18:21
  • 1
    For server side validation you can do a TryParse or use a RegEx. There are existing answers out there like this one on how to do that: https://stackoverflow.com/a/25933687/1260204 – Igor Aug 03 '17 at 18:24
  • 1
    Another client-side option is simply ``. Of course that only works with HTML5 compliant browsers, so you'll need a fallback, but it's definitely the best way to go for modern browsers. – Chris Pratt Aug 03 '17 at 19:14

1 Answers1

6

I would say that it is beter to validate your inputs then relay on custom behaviour of browsers.

You can validate your field more or less with following attribute:

public class HexColorAttribute : ValidationAttribute
{
    private string _errorMessage;

    public HexColorAttribute(string errorMessage)
    {
        _errorMessage = errorMessage
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var colorHexStr = (string)value;
        var valid = Regex.IsMatch(colorHexStr, "#[0-9a-fA-F]{6}");
        if(valid)
        {
              return ValidationResult.Success;
        }
        else
        {
              return new ValidationResult(_errorMessage)
        }

    }

and then:

[Required(AllowEmptyStrings = false, ErrorMessage = "Please enter the color")]
[HexColor("Color has to have format '#123456'")]
public string Color { get; set; }

It is working similarly to Required attribiute. Take a look at source code of RequiredAttribute.

Mufaka
  • 2,333
  • 1
  • 18
  • 25
Kedrzu
  • 623
  • 5
  • 12
  • 1
    "then relay on custom behaviour of browsers." This is the one statement I have serious issue with, because you don't need to rely on custom behavior. You can implement client side validation using features defined in non-browser specific standards: https://www.w3.org/TR/html5/forms.html#the-pattern-attribute For browsers not supporting the standard, usually poly-fills bring the browser inline with the standard. Obviously you should always have server side validation, but one does not preclude the benefit of the other. – AaronLS Aug 03 '17 at 20:45