How to add and remove this validation msg on jQuery button click in MVC5

AHSAN ALI 81 Reputation points
2023-10-10T12:15:18.63+00:00
         @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })

I want to add and remove this validation msg on jQuery button click

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,306 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 26,361 Reputation points Microsoft Vendor
    2023-10-11T07:25:30.9366667+00:00

    Hi @AHSAN ALI,

    I want to remove validation message on this form field on condition base

    You just need to make a judgment based on the conditions. You need to describe your needs in more detail so that we can better help you.

    You can refer to the example below to decide whether to add a verification message based on the checkbox.

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Test</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", id = "txtName" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>
    
        <div class="form-group">
            @Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { @class = "form-control", id = "txtDateOfBirth" } })
                @Html.ValidationMessageFor(model => model.DateOfBirth, "", new { @class = "text-danger" })
    
            </div>
        </div>
       
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input data-val="true" id="GetNewsletter" name="GetNewsletter" type="checkbox" value="true"  />
                <input type="submit" value="submit"  class="btn btn-default" />
            </div>
        </div>
    </div>
    }
    
    <script src="~/Scripts/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
    <script>
        jQuery(function ($) {
    
            $('form').validate({
                rules: {
                    txtDateOfBirth: {
                        required: true
                    }
                }
            });
    
            $("#GetNewsletter").change(function () {
                var checked = $(this).prop("checked");
                if (checked) {
                    $('#txtDateOfBirth').rules('add', { //set required rule
                        required: true,
                        messages: {
                            required: "DateOfBirth is required."
                        }
                    });
                } else {
                    $('#txtDateOfBirth').rules('remove', 'required'); //remove rule and call valid()
                    $('#txtDateOfBirth').valid();
                }
            });
    
        });
    
    </script>
    

    test6

    Best regards,
    Lan Huang


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 57,731 Reputation points
    2023-10-10T15:36:14.61+00:00

    if you are using a current version of jquery validation, just add remove the html attribute novalidate.

    If you are using an older version, the typical solution is to update the jquery validation ignore selector to also include the class .ignore. Add remove class to elements to control validation.

    var validator = $(“form”).validate({
        ignore: ".ignore, :hidden"
    });