How do i remove validations in my razor page?

Question

i have the following razor of a form

@using (Ajax.BeginForm(new AjaxOptions { }))
{
    <div id="frm" style="visibility:hidden">
    <table>
    <thead>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.LabelFor(x => x.emp.FirstName, new { @class = "form-control" })</td>
            <td>@Html.TextBoxFor(x => x.emp.FirstName, new { @class = "form-control" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.FirstName)</td>
        </tr>
         <tr>
            <td>@Html.LabelFor(x => x.emp.LastName, new { @class = "form-control" })</td>
            <td>@Html.TextBoxFor(x => x.emp.LastName, new { @class = "form-control" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.LastName)</td>
        </tr>
         <tr>
            <td></td>
            <td></td>
            <td>
                <input type="submit" value="Save" class="btn btn-success" id="save"/>
                <input type="submit" value="close" class="btn btn-success" id="close"/>
            </td>
        </tr>
    </tbody>
</table>
        </div>
}

when i click the close button the forms hides and the validation should get cleared. But validation clearing part does not work... How do i clear the validations by clicking close button?

UPDATE: here is my complete code

@model EmployeesTest.Models.EmployeeVM

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<input type="submit" name="name" value="New Entry" id="new"/>

@using (Ajax.BeginForm(new AjaxOptions { }))
{
    <div id="frm" style="visibility:hidden">
    <table>
    <thead>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.LabelFor(x => x.emp.FirstName, new { @class = "form-control"})</td>
            <td>@Html.TextBoxFor(x => x.emp.FirstName, new { @class = "form-control", id="firstName" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.FirstName)</td>
        </tr>
         <tr>
            <td>@Html.LabelFor(x => x.emp.LastName, new { @class = "form-control" })</td>
            <td>@Html.TextBoxFor(x => x.emp.LastName, new { @class = "form-control", id="lastName" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.LastName)</td>
        </tr>
         <tr>
            <td></td>
            <td></td>
            <td>
                <input type="button" value="Save" class="btn btn-success" id="save"/>
                <input type="button" value="close" class="btn btn-success" id="close"/>
            </td>
        </tr>
    </tbody>
</table>
        </div>
}


@section Scripts {
    <script>
        $(document).ready(function () {

            $('#new').load(x, function (y) {
                var form = $('#frm');
                form.data('validator', null);
                $.validator.unobtrusive.parse(form);
            });

            $('#new').click(function (evt) {
                //evt.preventDefault();
                $('#frm').css('visibility', 'visible');

            });

            $('#save').click(function (evt) {
                //evt.preventDefault();

                //$('#frm').css('visibility', 'visible');

            });

            $('#close').click(function (evt) {
                //evt.preventDefault();
                resetValidations();

                $('#frm').css('visibility', 'hidden');

            });

            function resetValidations() {
                //var validator = $('#frm').validate();
                //$('#frm').find('.field-validation-error span').each(function () {
                //    validator.settings.success($(this));
                //});
                //validator.resetForm();

                $('#firstName').addClass('input-validation-valid');
                $('#firstName').removeClass('input-validation-error');

                $('#lastName').addClass('input-validation-valid');
                $('#lastName').removeClass('input-validation-error');
            }

        });



    </script>
}

Here is the Model class EmployeeModel

public class EmployeeModel
{
    public int EmpID { get; set; }

    [Required]
    public string FirstName { get; set; }

    [Required]
    public string LastName { get; set; }
}

VM

public class EmployeeVM
{
    public string DepartmentID { get; set; }
    public List<SelectListItem> DepartmentColl { get; set; }

    public EmployeeModel emp { get; set; }

    public EmployeeVM()
    {
        emp = new EmployeeModel();
    }
}

Answer 1

First, I suggest the enclosing div in your form be styled with display:none rather than visibility: hidden (refer this answer for the difference)

<div id="frm" style="display:none">

Your "New Entry" button should be a normal button, not a submit button (its purpose is to show the form, not to submit it)

<button type="button" id="new">New Entry</button>

Then its associated script will be

$('#new').click(function () {
  $('#frm').show();
});

Note your $('#new').load() script should also be deleted (its not clear what you think this is doing)

Next you "Close" button should also be a normal button for the same reasons as above

<button type="button" class="btn btn-success" id="close">Close</button>

and its associated script to reset the form and validation will be

$('#close').click(function () {
  //Reset error messages
  $('.field-validation-error').empty().removeClass('field-validation-error').addClass('field-validation-valid');
  //Reset form controls
  $('#frm').get(0).reset();
  $('.input-validation-error').removeClass('input-validation-error').addClass('valid');
  // Reset lazy validation
  $('#frm').data('validator', null);
  $.validator.unobtrusive.parse($('#frm'))
  // Hide the form
  $('#frm').hide();
});

Side note: Suggest the first line in the <script> tags be var form = $('#frm'); and then you can replace all instances of $('#frm') with form (it caches the element so is more efficient). In fact you really don't need the <div id="frm" style="display:none"> element, because you can just show/hide the <form> element itself

Note also you can use a reset button for the "Close" button - <button type="reset" class="btn btn-success" id="close">Close</button> and delete the $('#frm').get(0).reset(); line of code.