覆盖预制验证脚本的字体大小

Question

I am trying to add validation to my text boxes and have been able to do so. I am running into a problem with the font size when you type the wrong thing into the text box and don't know how to fix it. The validation script I am using is:

https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js

I have included photos of what I am talking about.

Photo 1 Photo 2

I am trying to figure out how to make that font smaller. I do not believe there is a css with this js file. Even if there is there has to be a place to override it. I will also include my script tag.

$(document).ready(function() {
            $("#form1").validate({
                rules: {
                    <%=tbSearchTransactionID.UniqueID %>: {
                        digits: true
                    },
                    <%=tbSearchOrderNo.UniqueID %>: {
                        digits: true
                    }
                }, messages: {
                    %=tbSearchTransactionID.UniqueID %>: {
                    digits: "Enter a number"
                }
              }
            });
        });

Also, this is where the text boxes sit:

<h3>ShopFloor Transactions</h3>
<div class="form-row">
    <div class="col">
        <asp:TextBox ID="tbSearchTransactionID" runat="server" CssClass="form-control" placeholder="Transaction ID"></asp:TextBox>
    </div>
    <div class="col">
        <asp:TextBox runat="server" ID="tbSearchOrderNo" CssClass="form-control" placeholder="Order Number"></asp:TextBox>
    </div>
    <div class="col">
        <asp:TextBox runat="server" ID="tbSearchWorkCenter" CssClass="form-control" placeholder="Work Center"></asp:TextBox>
    </div>
</div>

So I bring in this big validate file. Have a small script tag running. Then have it linked to the text box names but I do not know where I can edit this font.

Answer 1

<script type="text/javascript">
                $(document).ready(function () {
                    $("#form1").validate({
                        rules: {
                    <%=tbSearchTransactionID.UniqueID %>: {
                        digits: true
                    },
                    <%=tbSearchOrderNo.UniqueID %>: {
                            digits: true
                        }
                }, messages: {
                     <%=tbSearchTransactionID.UniqueID %>: {
                    digits: "<span style='font-size: 20px;'>Enter a number</span>"
                },
                     <%=tbSearchOrderNo.UniqueID %>: {
                        digits: "<span style='font-size: 20px;'>Enter a number</span>"
                    }
                }
            });
        });