CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvcjquery-validate
Grizzly
Grizzly

Reputation: 5943

Set Validation Styling on Element

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.

Upvotes: 1

Views: 133

Answers (3)

Ramin Bateni
Ramin Bateni

Reputation: 17415

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.

Upvotes: 0

ADyson
ADyson

Reputation: 61904

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.

Upvotes: 1

JBoulhous
JBoulhous

Reputation: 952

you can add required attribute to the input 

<input id="TestPropertyEmpty" required />

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

Upvotes: 1

Related Questions