1

I need to enable and disable the required field validation based on anchor tag click.

Here I showed some example

<div class="row">
        <div class="col1">
            @Html.DisplayNameFor(m => m.CustomText)
        </div>
        <div class="col2">
            @Html.TextAreaFor(m => m.CustomText)
            @Html.ValidationMessageFor(m => m.CustomText, null, new { @style = "color:red" })
        </div>
        <a href="javascript:void(0)" onclick="SelectOn();" class="button">ON</a>
        <a href="javascript:void(0)" onclick="SelectOff();" class="button">OFF</a>
</div>
<script type="text/javascript">
        $(document).ready(function () {
            var modVal = '@Modle.IsEnabled';
            if (modVal = 'false') {
                //Need to disable
            }
        });

        function SelectOn() {
            //Need to enable
        }

        function SelectOff() {
            //Need to disable
        }
</script>

Edit

That CustomText is my model property

[Required]
[Display(Name = "Custom Text")]
public string CustomText { get; set; }
8
  • Not clear what your asking. Does your property CustomText have a validation attribute? Are you wanting to enforce that validation only under certain circumstances? Commented Aug 28, 2015 at 10:21
  • That CustomText is my model property [Required] [Display(Name = "Custom Text")] public string CustomText { get; set; } Commented Aug 28, 2015 at 11:48
  • No its not. Its a property in your model :) You should be using a [RequiredIf] or similar validation attribute so you get both server and client side validation (unlike the answer you accepted). Check out foolproof Commented Aug 28, 2015 at 11:49
  • That code is working, That much I want. Thank you Commented Aug 28, 2015 at 11:54
  • Working is it? What happens when you post to the controller method? And I gave you a link :) Commented Aug 28, 2015 at 11:56

1 Answer 1

4

You can use rules() like

If you want to add rules, rules('add',required);

If you want to remove rules, rules('remove','required');

<div class="row">
    <div class="col1">
        @Html.DisplayNameFor(m => m.CustomText)
    </div>
    <div class="col2">
        @Html.TextAreaFor(m => m.CustomText)
        @Html.ValidationMessageFor(m => m.CustomText, null, new { @style = "color:red" })
    </div>
    <a href="javascript:void(0)" onclick="SelectOn();" class="button">ON</a>
    <a href="javascript:void(0)" onclick="SelectOff();" class="button">OFF</a>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var modVal = '@Modle.IsEnabled';
        if (modVal = 'false') {
            //Need to disable
            $('#CustomText').rules('remove');
            $('#CustomText-error').text('');
        }
    });

    function SelectOn() {
        //Need to enable
        $("#CustomText").rules("add", 'required');
    }

    function SelectOff() {
        //Need to disable
        $('#CustomText').rules('remove');
        $('#CustomText-error').text('');
    }
</script>
Sign up to request clarification or add additional context in comments.

Comments