无法在我的ASP.NET Core MVC6项目中使用jquery.validation

Question

I thought I would have this working from a post that gave me the actual answer. it works in JSfiddle as it did in the previous post however I cannot get it to work in the project. I think the code is right it's just not validating the textbox on submit.

This is the markup for page:

<form action="/CompanyDetails/Edit" method="post">
  <div class="form-horizontal">
    <h4>CompanyDetailsViewModel</h4>
    <hr />
    <div class="text-danger validation-summary-errors">
      <ul>
        <li style="display:none"></li>
      </ul>
    </div>
    <input type="hidden" data-val="true" data-val-required="The CompanyDetailsId field is required." id="CompanyDetailsId" name="CompanyDetailsId" value="1" />
    <div class="form-group">
      <label class="col-md-2 control-label" for="ABN">ABN:</label>
      <div class="col-md-10">
        <input type="text" name="ABN" id="ABN" class="form-control" />
        <span class="text-danger field-validation-error" data-valmsg-for="ABN" data-valmsg-replace="true" />
      </div>
    </div>

The form button:

<div class="form-group">
  <div class="col-md-offset-2 col-md-10">
    <input type="submit" value="Save" class="btn btn-default" />
  </div>
</div>

The form renders but when I click on save instead of it showing an error it just goes back to the controller however the ModelState is false.

I have set breakpoints on the actual validate script via Firefox but it doesn't even fire.

Why is the validate script not working in the asp.net page while its working in JSFiddle ?

Answer 1

I worked this out after hours of banging my head against the wall. Turns out that validation is done in Asp.net core automatically based on the what you set up in the model being used by the view. So if you have a dataannotation like [Requred] then this will be added into the markup as part of the taghelper conversion.

So what I really wanted was to "add" another rule not validate it which I had. what actually happened was that the ABN already had a [Required] rule so nothing happened for my custom rule as it needed to be added. Once I actively added a new rule then it all started to work. I decided to add in another custom rule checking the length of the string to see if the rules were sequential.. that is, validation for that identifier would stop once a "false" was found. In this case the last rule that validates the ABN to the Australian Taxation Office's algorithm also has a check for length but never gets there if the number of digits doesnt tally.

Incidentally, the script has been placed in the @section Scripts{ } after the validation scripts so it renders after everything...

By the way happy to be contradicted if I have any of this wrong as I am still just learning..

Anyway here is the code:

    <script>
    $(function () {

        // Your custom validation method
        jQuery.validator.addMethod('abnValidate', function abnValidate(value, element) {
            if (value.length != 11 || isNaN(parseInt(value)))
                return false;
            var weighting = [10, 1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
            var tally = (parseInt(value[0]) - 1) * weighting[0];
            for (var i = 1; i < value.length; i++) {
                tally += (parseInt(value[i]) * weighting[i]);
            }
            return (tally % 89) == 0;
        });

        jQuery.validator.addMethod('exactlength', function (value, element) {
            if (value.length != 11 || isNaN(parseInt(value)))
                return false;
            return true;
        });

        $("#ABN").rules("add", {
            required: true,
            exactlength: true,
            abnValidate: true,
            messages: {
                required: "Required input",
                exactlength: "ABN has to be 11 digits long.",
                abnValidate: "The ABN does not conform to the ATO's algorithm"
            } 
        });
    });
</script>