4

How do you trigger client-side validation in ASP .NET Core MVC without submitting a form?

I am using modals, and need to trigger validation (without submitting the form).

In jQuery, I could do this

$('#formID').validate().form()

However, I would like to trigger the unobtrusive validation included in ASP .NET Core.

2 Answers 2

4

Unobtrusive validation still exists with ASP.NET Core, you just have to include the relevant scripts. Here's a full example.

Assuming this model:

public class SomeViewModel
{
    [Required]
    public string Name { get; set; }
}

And this controller action:

public IActionResult Index()
{
    return View(new SomeViewModel());
}

And finally, the view:

@model SomeViewModel

@{
    ViewData["Title"] = "Home Page";
}

<form asp-action="Index" id="formID" method="post">
    <input asp-for="Name" />
    <span asp-validation-for="Name"></span>
    <input type="submit" />
</form>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script type="text/javascript">
        $(function () {
            // Silly example to demonstrate.
            $('#formID').validate().form();

            if ($('#formID').valid() === false) {
                console.log("invalid");
            } else {
                console.log("valid!");
            }
        });
    </script>
}

If you take a look inside ~/Views/Shared/_ValidationScriptsPartial.cshtml, you'll see it contains:

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

If you look in your developer tools console, it should validate the form immediately as the page is loaded, and display the required field is missing validation message next to the Name textbox.

Sign up to request clarification or add additional context in comments.

1 Comment

Essentially, nobody wants their validation to fire as soon as the page gets loaded, its better to fire it when the form is submitted i.e $('body').on('submit','#formID',function() {}) event
0

I think we can use this code:

public class Movie
{
    public int Id { get; set; }

    [Required]
    [StringLength(100)]
    public string Title { get; set; }

    [ClassicMovie(1960)]
    [DataType(DataType.Date)]
    [Display(Name = "Release Date")]
    public DateTime ReleaseDate { get; set; }

    [Required]
    [StringLength(1000)]
    public string Description { get; set; }

    [Range(0, 999.99)]
    public decimal Price { get; set; }

    public Genre Genre { get; set; }

    public bool Preorder { get; set; }
}

Please check this article

3 Comments

Just to clarify, I already have data annotations and everything works when I submit the form. However, I want to trigger an unobtrusive validation without having to submit the form. Any suggestions?
Perfect that worked! var form = $('#formID'); $.validator.unobtrusive.parse(form); var validate = form.validate().form();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.