CODEWITHSUNDEEP
jsonasp.net-coredata-annotationsunobtrusive-validation
Ray
Ray

Reputation: 4947

How can I validate on the client if I use MVC validation but posting a JSON object?

I'm developing a ASP.NET Core web application where I'm using DataAnnotations to decorate my view model with validation attributes. When I open a detail page with my inputs, I see that Core added the HTML5 validation attributes to the rendered HTML (i.e. data-val="true").

However, I wrote custom client-side code when the user clicks on the Save button like this:

    $(document).on("click", "#SaveAsset", function (event) {
        event.preventDefault();
        Asset.Save();
    });

I also have a Save function defined like this:

window.Asset.Save = function () {

    var postData = {
        'Id': $("#Id").val(),
        'SerialNumber': $("#SerialNumber").val(),
        'PartNumber': $("#PartNumber").val(),
        'assetTypeId': $("#AssetTypeId").val()
    };

    $.post('/Asset/SaveAsset', postData);
}

I need to validate on the client side first before calling $.post but I'm confused about how to do it. Microsoft shows that the unobtrusive javascript works automatically when you use it with forms. But I'm not using the HTML form element to submit my page. So how can I trigger the HTML5 validation attributes?

I added the links to jquery.validate.js and jquery.validate.unobtrusive.js. Right now, if I click the Save button the data is sent to the server and the controller checks the ModelState. But it shouldn't even be sending anything to the server. The client should stop the validation.

Should I even stop doing it this way? For example, creating my postData JSON object by getting the val() of each input.

Should I use the form element? I stopped using it because my page has hundreds of inputs so I was worried I would have problems. This way, I have control over each input.

Upvotes: 2

Views: 622

Answers (1)

McKabue
McKabue

Reputation: 2232

Use a javascript solution like jQuery Validation Plugin to validate data before sending to the server. Otherwise, send the data to the server, and return a the errors with a bad request if validation fails.

Eg.

Return BadRequest(string[]{"Name is required", "Id must me a number"});

then capture the errors and shoe to the user

Upvotes: 1

Related Questions