Jquery Validation fields with dot in asp-for

Question

validation is not working here, please guide me. I tried to follow this but didn;t work How to validate input fields with a dot in name using the jquery validation plugin? thanks

JSFiddle link: https://jsfiddle.net/arshad7abdul/8mu8wL84/4/

 <form id="appForm" asp-controller="some" asp-action="AnonymousApp" method="post">

<div class="panel-body pt0 p10">
            <section class="grid grid--direction-row">
                <!-- First Name -->
                <div class="grid__col-4">
                    <label class="control-label">First Name <i class="fa fa-asterisk"></i></label>
                    <input asp-for="TaxPreparer.FirstName" class="form-control" maxlength="50"/>
                </div>

                <!-- Middle Name -->
                <div class="grid__col-4">
                    <label class="control-label">Middle Name</label>
                    <input asp-for="TaxPreparer.MiddleName" class="form-control charlimit" maxlength="50"/>
                </div>

                <!-- Last Name -->
                <div class="grid__col-4">
                    <label class="control-label">Last Name <i class="fa fa-asterisk"></i></label>
                    <input asp-for="TaxPreparer.LastName" class="form-control charlimit" maxlength="50"/>
                </div>
            </section>

 </div>
 <input class="btn btn-success btn-large" style="float: right; "id="submitApp" type="submit" value="Submit" />
    </form>

Here is the Javascript

$(document).ready(function() {  
var checkformValidation = function () {
            $("#appForm").validate({
            rules: {
                "TaxPreparer.FirstName": "required"
            }
            });
        }

   $('#submitApp').click(function(e) {
            e.preventDefault();
            checkformValidation();
            //checkValidation();
            //$("#appForm").validate();
            if ($("#appForm").valid()) {
                alert("success");
                return;
            } else {
                alert("wrong");
            }
            //$('#submitAppModal').modal('show');
        });
      });

Since you tagged this question JavaScript, which is client-side code, show us the actual rendered JavaScript & HTML markup instead the ASP. — Sparky
– Sparky, Commented Feb 15, 2018 at 22:29
Also FYI, putting .validate() inside of the form's submit click handler makes no sense. The .validate() method is only used for initializing the plugin on your form on page load. Capturing the click is then automatic. — Sparky
– Sparky, Commented Feb 15, 2018 at 22:47

Punith Jain · Accepted Answer · 2018-02-15 18:43:17Z

0

instead of asp-for try name attribute on input

A 'name' attribute is required for all input elements needing validation, and the plugin will not work without this.

if you want asp-for for some other purpose you can keep it but you got to have a name on input for validation using the plugin mentioned

https://jsfiddle.net/206ku1yL/1/

  $(document).ready(function() {  
  var checkformValidation = function () {
                $("#appForm").validate({
                rules: {
                    "TaxPreparer.FirstName": "required"
                }
                });
            }

       $('#submitApp').click(function(e) {
                e.preventDefault();
                checkformValidation();
                //checkValidation();
                //$("#appForm").validate();
                if ($("#appForm").valid()) {
                    alert("success");
                    return;
                } else {
                    alert("wrong");
                }
                //$('#submitAppModal').modal('show');
            });
          });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
<form id="appForm" asp-controller="some" asp-action="AnonymousApp" method="post">
   
    <div class="panel-body pt0 p10">
                <section class="grid grid--direction-row">
                    <!-- First Name -->
                    <div class="grid__col-4">
                        <label class="control-label">First Name <i class="fa fa-asterisk"></i></label>
                        <input name="TaxPreparer.FirstName" class="form-control" maxlength="50"/>
                    </div>

                    <!-- Middle Name -->
                    <div class="grid__col-4">
                        <label class="control-label">Middle Name</label>
                        <input name="TaxPreparer.MiddleName" class="form-control charlimit" maxlength="50"/>
                    </div>

                    <!-- Last Name -->
                    <div class="grid__col-4">
                        <label class="control-label">Last Name <i class="fa fa-asterisk"></i></label>
                        <input name="TaxPreparer.LastName" class="form-control charlimit" maxlength="50"/>
                    </div>
                </section>
   
   </div>
   <input class="btn btn-success btn-large" style="float: right; "id="submitApp" type="submit" value="Submit" />
        </form>

edited Feb 15, 2018 at 18:43

answered Feb 15, 2018 at 18:23

Punith Jain

1,6871 gold badge15 silver badges21 bronze badges

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

5 Comments

KimboSlice Over a year ago

Thanks Punith, Also, may I please know the reason for why it doesn't work with asp-for tag helper?

Punith Jain Over a year ago

@KimboSlice in the documentation jqueryvalidation.org/reference it mention that you have to address to name of the input for validation

KimboSlice Over a year ago

but isn't asp-for is the same like name and id? asp-for = "Taxpreparer.Name" gives html => name= "Taxpreparer.Name" id="Taxpreparer_Name"

Sparky Over a year ago

@KimboSlice, then why did you put the ASP markup in your jsFiddle instead of the actual rendered HTML markup that a browser would use?

KimboSlice Over a year ago

@Sparky there was something else preventing the validation, it does work with both asp-for and name, The asp-for tag is implemented by someone else working on it. thank you.

Collectives™ on Stack Overflow

Jquery Validation fields with dot in asp-for

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related