Question

我试图在第一个名称框下面显示错误但由于某种原因它不会工作，其他框将会。我在stackoverflow和一堆其他网站上尝试了一系列名字 addmethods 的不同版本。

我将从提供的Modal中检索信息，我希望它能够像我已经构建的其他三个一样提出错误。

HTML：

<!--Modal-->
<form id="EmployeeModalForm" name="EmployeeModalForm" method="post" action="">
    <div class="modal fade text-center" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">X</button>
                    <h1 id="modalTitle">Employee</h1>
                </div>
                <div class="modal-body">
                    <div class="row" style="padding-bottom:4px;">
                        <div class="text-right col-xs-4">Title:</div>
                        <div class="text-left col-xs-4">
                            <input type="text" placeholder="enter a title" id="TextBoxTitle"  name ="TextBoxTitle" class="form-control" />
                        </div>
                    </div>
                    <div class="row" style="padding-bottom:4px;">
                        <div class="text-right col-xs-4">First Name:</div>
                        <div class="text-left col-xs-4">
                            <input type="text" placeholder="enter a first name" id="TextBoxFirstname" name="TextBoxFirstname" class="form-control" />
                        </div>
                    </div>
                    <div class="row" style="padding-bottom:4px;">
                        <div class="text-right col-xs-4">Last Name:</div>
                        <div class="text-left col-xs-4">
                            <input type="text" placeholder="enter a Lastname" id="TextBoxLastname" name="TexBoxLastname" class="form-control" />
                        </div>
                    </div>
                    <div class="row" style="padding-bottom:4px;">
                        <div class="text-right col-xs-4">Phone:</div>
                        <div class="text-left col-xs-4">
                            <input type="text" placeholder="enter a phone number" id="TextBoxPhone" name="TextBoxPhone" class="form-control" />
                        </div>
                    </div>
                    <div class="row" style="padding-bottom:4px;">
                        <div class="text-right col-xs-4">Email:</div>
                        <div class="text-left col-xs-4">
                            <input type="text" placeholder="enter an email" id="TextBoxEmail" name="TextBoxEmail" class="form-control" />
                        </div>
                    </div>
                    <div class="row" style="padding-bottom:4px;">
                        <div class="text-right col-xs-4">Department:</div>
                        <div class="text-left col-xs-4">
                            <select id="ddlDepts"></select>
                        </div>
                    </div>
                    <div id="HiddenId" type="hidden"></div>
                    <div id="HiddenEntity" type="hidden"></div>
                </div>
                <div class="modal-footer">

                    <input type="button" value="" id="ButtonAction" />
                    <input type="button" value="Delete" id="ButtonDelete" />
                </div>
            </div>
        </div>
    </div>
    </form>

    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.validate.min.js"></script>
    <script src="Scripts/employee.js"></script>

这是我为员工html文件构建的员工验证器。

$("#EmployeeModalForm").validate({
rules: {
    TextBoxTitle: { maxlength: 4, required: true, validTitle: true },
    TextBoxFirstname: { maxlength: 25, required: true, validfirst: true },
    TextBoxLastname: { maxlength: 25, required: true },
    TextBoxEmail: { maxlength: 40, required: true, email: true },
    TextBoxPhone: { maxlength: 15, required: true, validPhone: true }
},
ignore: ".ignore, :hidden",
errorElement: "div",
wrapper: "div", // a wrapper around the error message
messages: {
    TextBoxTitle: {
        required: "required 1-4 chars.", maxlength: "required 1-4 chars.", validTitle: "Mr. Ms. Mrs. or Dr."
    },
    TextBoxFirstname: {
        required: "required 1-25 chars.", maxlength: "required 1-25 chars.", validfirst: "Please enter a first name"
    },
    TextBoxLastname: {
        required: "required 1-25 chars.", maxlength: "required 1-25 chars."
    },
    TextBoxPhone: {
        required: "required 1-15 chars.", maxlength: "required 1-15 chars.", validPhone: "Please enter a valid US or Canadian phone#."
    },
    TextBoxEmail: {
        required: "required 1-40 chars.", maxlength: "required 1-40 chars.", email: "need vaild email format"
    }
}
});

这是主要功能

中的整个addmethod

$.validator.addMethod("validTitle", function (value, element) { // custom rule
    return this.optional(element) || (value == "Mr." || value == "Ms." || value == "Mrs." || value == "Dr.");
}, "");

$.validator.addMethod('validPhone', function (value) {
    return /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/.test(value);
}, "");

$.validator.addMethod('email', function (value)
{ return /^[a-zA-Z0-9._-]+@+[a-zA-Z]+.+ [a-zA-Z]$/.test(value); }, "");


$.validator.addMethod('validfirst', function (value) {
    return /^[a-zA-Z]$/.test(value);
}, "");

这是一张图片，证明我已经返回错误调用的其他三个字段

JQuery验证规则

0 个答案: