ASP.NET Core 3.0 Razor JQuery validation rules on partial page

Question

I have a page in ASP.NET Core 3.0 with RAZOR(no MVC), with a partial page loaded with AJAX; load works well but validation rules no. Validation with "required" notation on otherinput fields also works well.

This is my main page:

    <a class="nav-link showposition text-dark text-center p-0 collapsed" id="ShowPosition" href='ShowPosition'>@item.Sale_Order_Position</a>

    <div class="card shadow mb-4 collapse" aria-labelledby="ShowPosition">
        <div id="DetailContents">
        </div>
    </div>

    <script> 
    jQuery(function($) {
    $('.showposition').on('click', function (e) {
        e.preventDefault(); 
        $.ajax({
            url: $(this).attr('href'),
            type: 'GET',
            cache: false,
            headers: {
                RequestVerificationToken:  $('input:hidden[name="__RequestVerificationToken"]').val()
            }
        }).done(function(result) {
            $('#DetailContents').html(result);

            //Setup Position details
            $('#SavePositionForm').SetupPositionDetails();
        });
    });

   (function( $ ){
    $.fn.SetupPositionDetails = function () {

        $("#SavePositionForm").removeData("validator");
        $("#SavePositionForm").removeData("unobtrusiveValidator");
        $.validator.unobtrusive.parse("#SavePositionForm");

        $("#SavePositionForm").validate({
            debug: true,
            rules: {
                inp_NetPrice: {
                    required: true
                }
            }
        });

           }; 
    })(jQuery);

    });
    </script>

And this is my Partial View:

<form id="SavePositionForm" class="needs-validation" novalidate>
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
        <div class="row">
            <div class="col div_image pl-0">
                <label class="bg-white"><i class="fr fa-newspaper mr-2"></i><localize>Net price</localize></label>
            </div>
            <div class="col-sm-6 col-md-6">
                <input class="form-control form-control-sm" type="number" step="any" name="inp_NetPrice" id="inp_NetPrice" asp-for="@Model.Item1.Net_Price" value="@Model.Item1.Net_Price"/>
            </div>
        </div>
    </div>
    </form>

The problem is "inp_NetPrice" validation not working.

I have also try this script, in main partial page(i know, it's not a good idea to put script in partial pages but I would like to try) without success:

$(document).ready(function () {

    $("#SavePositionForm").validate({
            debug: true,
            rules: {
                inp_NetPrice: {
                    required: true
                }
            }
    });

    $("#SavePositionForm").removeData("validator");
    $("#SavePositionForm").removeData("unobtrusiveValidator");
    $.validator.unobtrusive.parse("#SavePositionForm");

});

Any suggestions? Thanks.

EDIT:

Generated HTML:

<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
   <div class="row">
       <div class="col div_image pl-0">
           <label class="bg-white"><i class="fa fa-newspaper mr-2"></i>Net price</label>
       </div>
       <div class="col-sm-6 col-md-6">
           <input class="form-control form-control-sm" id="inp_NetPrice" name="inp_NetPrice" value="" type="number" step="any">
       </div>
   </div>
 </div>

Can you check the generated HTML output for the input element in question? Particularly interested in the name and id attributes — jcruz

MrTex MrTex · Accepted Answer · 2019-12-10T08:13:55

Problem fixed removing

name="inp_NetPrice"

because i have

name="inp_NetPrice" id="inp_NetPrice" asp-for="@Model.Item1.Net_Price"

ASP.NET Core 3.0 Razor JQuery validation rules on partial page

1 Answers