Set Validation Styling on Element

Question

On my form I have a Hidden element that is strongly-typed to the viewmodel, and then I have a 'dummy' textbox where the user will enter the value that will be copied to the hidden element's value.

Razor

@Html.HiddenFor(model => model.TestProperty)
@Html.Editor("TestPropertyEmpty", new { htmlAttributes = new { @class = "form-control", @placeholder = "xxxx.x" } })

jQuery

@section scripts{
    @Scripts.Render("~/bundles/jqueryval")

    <script>

        //enable jQuery validation on hidden elements
        $.validator.setDefaults({
            ignore: []
        });


        $(document).ready(function() {

            $("#TestProperty").val(''); // clear value for validation purposes

            /* Created a 'dummy' textbox so that it will be empty on page load instead of using jQuery to clear the actual strongly-typed property
                because you can see the textbox being cleared on page load.  So once user enters value into dummy textbox then that value will be 
                the value for the actual model property that is hidden
            */
            $("#TestPropertyEmpty").blur(function() {
                $("#TestProperty").val(this.value);
                console.log($("#TestProperty").val());
            });

        });
    </script>
}

Goal

The property TestProperty is required and it is hidden, but I still need validation on it, hence the snippet of code above the $(document).ready... which enables validation on hidden elements.

But my goal is that when TestProperty is empty and the user tries to submit..

I want the 'dummy' textbox to be highlighted in red since the actual property is hidden? How do I accomplish this?

Also, is there a name for such elements that really aren't related to the model but used for these kinds of purposes like in my example?

I don't like the term 'dummy-element'.

Then I can edit my question title to represent a better, more informative style.

is this a conceptual thing? Why do you need a dummy field? A textbox and a hidden field can both store the same information. — ADyson, Jan 09 '18 at 15:47
@ADyson it's more of an OCD thing.. The purpose of the dummy field is so that I don't have to use `$("#...).hide()`.. because if I do that.. I can see the `0.00` being hidden on page load.. not a big deal.. but I was wondering if what I'm asking is possible. — Grizzly, Jan 09 '18 at 15:51
Why do you need to hide that? Seems a bit of a convoluted approach just to display empty instead of 0.00. Is it strictly necessary? If the field is required, then 0 is a perfectly valid value. Why can't the user see that? If you want them to set a different value, then validate by setting a rule that the field value must be > 0 — ADyson, Jan 09 '18 at 15:54
@ADyson Sorry, not hide.. but `$("#...).val('')`.. didn't mean hide.. `0.00` is allowed and I don't want that value being loaded on page load because some of the users will overlook it since it has a value. — Grizzly, Jan 09 '18 at 16:09
Ok but I would make exactly the same point as my last comment, just substitute the word "hide" with "blank out". — ADyson, Jan 09 '18 at 16:10
@ADyson because some of the users will overlook it since it has a value. — Grizzly, Jan 09 '18 at 16:17
My suggestion to validate the range would mitigate that, wouldn't it? If you don't want it blank, you're effectively saying (because 0 is stored in the hidden field) that you don't want it 0, so you can set a validation rule on the field that it must be > 0. If the user ignores the field, they'll get a validation error. It's certainly simpler and cleaner than what you're trying to do now. — ADyson, Jan 09 '18 at 16:25
That's great, I have written it up into an answer, have a read - does that provide you with a satisfactory explanation, or do you need any more amendments? — ADyson, Jan 09 '18 at 16:31

score 1 · Answer 1 · answered Jan 09 '18 at 15:31

1

you can add required attribute to the input

<input id="TestPropertyEmpty" required />

And voila. let me know if that doesn't help.

answered Jan 09 '18 at 15:31

JBoulhous

844
7
11

This approach creates an extra error message. I'm already validating that model property ,`TestProperty`.. so if that is blank then I get the error message. If I try your approach I receive an extra validation message, `This field is required`. – Grizzly Jan 09 '18 at 16:16
Yes, i am aware of that, its just another workaround that needs a workaround. i will come back to offer a better solution – JBoulhous Jan 11 '18 at 22:50

score 1 · Accepted Answer · answered Jan 09 '18 at 16:31

1

Instead of creating a proxy field (for the purpose of displaying an empty box instead of 0.00, in order to draw the user's attention to it), you can use a Range validation rule on the original field to specify that the field's value must be greater than 0 when the form is submitted. If the user ignores the field, they'll get a validation error. It's certainly simpler and cleaner than what you're trying to do now.

This has equivalence with your current design, because if you don't want the field blank, you're effectively saying (because 0 is stored in the hidden field) that you don't want it 0, and the validation will have the same effect in that it ensures the user pays attention to the field. In fact in your previous approach, it would have been possible for the user to write 0 in the box again, which it seems is a value you wouldn't have been happy for them to enter.

answered Jan 09 '18 at 16:31

ADyson

57,178
14
51
63

Thank you! Quick Question.. when using EF Code-First.. is there a data annotation to only allow 1 digit after the decimal on a decimal property? In SQL, for `TestProperty`.. it is decimal(18,2).. but I want (18,1).. is there a data annotation for this and then migrate and update? – Grizzly Jan 09 '18 at 16:33
Does this help? https://stackoverflow.com/questions/19811180/best-data-annotation-for-a-decimal18-2 . You could just change the expression slightly to check for only 1 decimal place of precision. I'm not sure how you're relating that to your EF entity though, what do you mean by "migrate and update" exactly? Are you using DTOs/ViewModels, or directly using EF entities as your model? – ADyson Jan 09 '18 at 16:35
ViewModels for my view.. so I guess I don't need to use migrations.. maybe a regexpression will work. – Grizzly Jan 09 '18 at 16:36
Curious, is there any articles/documentation on proxy fields? Explaining where that term originated from, etc? – Grizzly Jan 12 '18 at 13:02
@GTown-Coder As I'm sure you know, a "proxy" in general usage is something which substitutes for something else. I wasn't really employing it in a specific technical sense. – ADyson Jan 12 '18 at 13:02
Ahh okay, gotcha. – Grizzly Jan 12 '18 at 13:05

score 0 · Answer 3 · answered Jan 09 '18 at 21:05

The property TestProperty is required and it is hidden, but I still need validation on it

I have already written an answer on the subject below, HERE. Read it, I hope it help you.

In some cases you want just ignore validation on one or several hidden fields (not all hidden field) in client-side and also you want validate them and other hidden fields in server-side.

Set Validation Styling on Element

3 Answers3