在asp-for中带点的Jquery验证字段

时间:2018-02-15 18:08:50

标签: javascript jquery jquery-validate

验证在这里不起作用,请指导我。我试图遵循这个但没有工作How to validate input fields with a dot in name using the jquery validation plugin?谢谢

JSFiddle链接: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>

这是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');
        });
      });

1 个答案:

答案 0 :(得分:0)

而不是输入<{p>上的asp-for尝试name属性

需要验证的所有输入元素都需要&#39; name&#39; 属性,如果没有此功能,插件将无效。

如果您希望将asp-for用于其他目的,您可以保留它但是您必须使用提到的插件输入验证名称

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

&#13;
&#13;
  $(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');
            });
          });
&#13;
<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>
&#13;
&#13;
&#13;