javascript - jQuery 验证插件无法正常工作-6ren

javascript - jQuery 验证插件无法正常工作

转载作者：行者123 更新时间：2023-12-02 17:25:48

我以前有过这个工作...我不知道发生了什么变化来破坏我的验证器插件。当我单击“提交”按钮时，我会收到一条警报，指出当我将许多字段留空时，该表单有效。我在控制台中没有收到任何 JS 错误。

注册表:

<div class="error_container">
                        <p>Please correct the following errors and try again:</p>
                        <ul />
                    </div>

                    <div class="registration">
                        <form class="pure-form pure-form-aligned" id="purchase_premium" action="javascript:" method="POST">
                            <legend>
                                <h1>Purchase Premium Access</h1>
                            </legend>

                            <fieldset>
                                <div class="pure-control-group">
                                    <label for="first_name">First Name:</label>
                                    <input id="first_name" type="text" value="Timothy" placeholder="First Name">
                                </div>

                                <div class="pure-control-group">
                                    <label for="last_name">Last Name:</label>
                                    <input id="last_name" type="text" value="Hemendinger" placeholder="Last Name">
                                </div>                              

                                <div class="pure-control-group">
                                    <label for="email">Email Address:</label>
                                    <input id="email" type="email" value="timh@theihcc.com" placeholder="Email Address">
                                </div>

                                <div class="pure-control-group">
                                    <label for="password">Password:</label>
                                    <input id="password" type="password" value="185869" placeholder="Password">
                                </div>

                                <div class="pure-control-group">
                                    <label for="password_confirm">Confirm Password:</label>
                                    <input id="password_confirm" type="password" value="185869" placeholder="Password">
                                </div>

                                <div class="pure-control-group">
                                    <label for="address">Address:</label>
                                    <input id="address" type="text" placeholder="Address" value="15 St.">
                                </div>                          

                                <div class="pure-control-group">
                                    <label for="city">City:</label>
                                    <input id="city" type="text" placeholder="City" value="Atlanta">
                                </div>

                                <div class="pure-control-group">
                                    <label for="state">State/Province:</label>
                                    <select id="state">
                                        <option value="">- Select Province/State -</option>
                                        <option value="AL">Alabama</option> 
                                        <option value="AK">Alaska</option> 
                                        <option value="AZ">Arizona</option> 
                                        <option value="AR">Arkansas</option> 
                                        <option value="CA">California</option> 
                                        <option value="CO">Colorado</option> 
                                        <option value="CT">Connecticut</option> 
                                        <option value="DE">Delaware</option> 
                                        <option value="DC">District Of Columbia</option> 
                                        <option value="FL">Florida</option> 
                                        <option value="GA" selected>Georgia</option> 
                                        <option value="HI">Hawaii</option> 
                                        <option value="ID">Idaho</option> 
                                        <option value="IL">Illinois</option> 
                                        <option value="IN">Indiana</option> 
                                        <option value="IA">Iowa</option> 
                                        <option value="KS">Kansas</option> 
                                        <option value="KY">Kentucky</option> 
                                        <option value="LA">Louisiana</option> 
                                        <option value="ME">Maine</option> 
                                        <option value="MD">Maryland</option> 
                                        <option value="MA">Massachusetts</option> 
                                        <option value="MI">Michigan</option> 
                                        <option value="MN">Minnesota</option> 
                                        <option value="MS">Mississippi</option> 
                                        <option value="MO">Missouri</option> 
                                        <option value="MT">Montana</option> 
                                        <option value="NE">Nebraska</option> 
                                        <option value="NV">Nevada</option> 
                                        <option value="NH">New Hampshire</option> 
                                        <option value="NJ">New Jersey</option> 
                                        <option value="NM">New Mexico</option> 
                                        <option value="NY">New York</option> 
                                        <option value="NC">North Carolina</option> 
                                        <option value="ND">North Dakota</option> 
                                        <option value="OH">Ohio</option> 
                                        <option value="OK">Oklahoma</option> 
                                        <option value="OR">Oregon</option> 
                                        <option value="PA">Pennsylvania</option> 
                                        <option value="RI">Rhode Island</option> 
                                        <option value="SC">South Carolina</option> 
                                        <option value="SD">South Dakota</option> 
                                        <option value="TN">Tennessee</option> 
                                        <option value="TX">Texas</option> 
                                        <option value="UT">Utah</option> 
                                        <option value="VT">Vermont</option> 
                                        <option value="VA">Virginia</option> 
                                        <option value="WA">Washington</option> 
                                        <option value="WV">West Virginia</option> 
                                        <option value="WI">Wisconsin</option> 
                                        <option value="WY">Wyoming</option>
                                    </select>    

                                </div>

                                <div class="pure-control-group">
                                    <label for="cc_number">Credit Card Number:</label>
                                    <input id="cc_number" type="text" value="4242424242424242">
                                </div>

                                <div class="pure-control-group">
                                    <label for="cc_expiration_month">Expiration Date:</label>

                                    <select id="cc_expiration_month">
                                        <option value="1">January</option>
                                        <option value="2">February</option>
                                        <option value="3">March</option>
                                        <option value="4">April</option>
                                        <option value="5">May</option>
                                        <option value="6" selected>June</option>
                                        <option value="7">July</option>
                                        <option value="8">August</option>
                                        <option value="9">September</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                    </select>

                                    <select id="cc_expiration_year">
                                        <option value="2014">2014</option>
                                        <option value="2015" selected>2015</option>
                                        <option value="2016">2016</option>
                                        <option value="2017">2017</option>
                                        <option value="2018">2018</option>
                                        <option value="2019">2019</option>
                                        <option value="2020">2020</option>
                                        <option value="2021">2021</option>
                                        <option value="2022">2022</option>
                                    </select>

                                </div>

                                <div class="pure-control-group">
                                    <label for="cc_cvc">CVV/CVC Security Code:</label>
                                    <input id="cc_cvc" type="text" value='697'>
                                </div>

                                <div class="pure-control-group">
                                    <label for="account_type">Account Type:</label>
                                    <select id="account_type">
                                        <option value="">--- Choose One ----</option>
                                        <option value="30-day">30-Day Access</option>
                                        <option value="1-year">One-Year Subscription</option>
                                    </select>
                                </div>

                                <div style="margin-left: 55px; padding-top: 25px; margin-bottom: 15px;">

                                    <input type="checkbox" id="terms" style="margin-right: 20px;"><label for="terms">I agree to the</label> <a href="#" id="terms_link">Terms & Conditions</a>

                                </div>

                                 <button id="purchase_submit" class="pure-button pure-button-primary">Submit</button>

                            </fieldset>
                        </form>

验证器代码:

<script src="js/validate.js"></script>

<script>
$(function() {

    $('#purchase_submit').on('click', function(e){

        $("#purchase_premium").validate({
            onkeyup: false,    
            onfocusout: false, 
            onclick: false,
            rules: {
                account_type: "required",
                first_name: "required",
                last_name: "required",
                address: "required",
                city: "required",
                email: "required",
                state: "required",
                cc_number: {
                    required: true,
                    creditcard: true
                },
                cc_cvc: "required",
                    password: {
                        required: true,
                        minlength : 6
                    },
                    password_confirm: {
                      equalTo: "#password"
                    }                   
            },
            messages: {
                account_type: "Please select an account type.",
                first_name: "Please enter your first name",
                last_name: "Please enter your last name",
                address: "Please enter your address",
                city: "Please enter your city",
                email: "Please enter a valid email address",
                state: "Please select a state/province",
                cc_number: "Please enter a valid credit card number",
                cc_cvc: "Please enter a valid CVV/CVC Security Code",
                password: {
                    required: "Please enter a password.",
                    minlength: "Your password must be at least 6 characters in length",
                }

            },
            errorContainer: $('.error_container'),
            errorLabelContainer: $('.error_container ul'),
            wrapper: 'li'
        });

        jQuery.extend(jQuery.validator.messages, {

            equalTo: "Your two passwords do not match"

        });

        if ($("#purchase_premium").valid()) {
            alert('valid');
            e.preventDefault();
            //$("#purchase_premium").submit();
        } else {
            e.preventDefault();
        }


    });
});

</script>

最佳答案

你输入.validate()功能到.onclick功能。这是不正确的。
您没有为每个 <input .. /> 指定名称属性

问题已经解决了。

使用这个:

$().ready(function () {
    var container = $('.error_container');
    $("#purchase_premium").validate({
        onkeyup: false,
        onfocusout: false,
        errorContainer: container,
        errorLabelContainer: $("ol", container),
        wrapper: 'li',
        rules: {
            account_type: {
                required: true
            },
            first_name: {
                required: true
            },
            last_name: {
                required: true
            },
            address: {
                required: true
            },
            city: {
                required: true
            },
            email: {
                required: true
            },
            state: {
                required: true
            },
            cc_number: {
                required: true,
                creditcard: true
            },
            cc_cvc: "required",
            password: {
                required: true,
                minlength: 6
            },
            password_confirm: {
                equalTo: "#password"
            }
        },
        messages: {
            account_type: "Please select an account type.",
            first_name: "Please enter your first name",
            last_name: "Please enter your last name",
            address: "Please enter your address",
            city: "Please enter your city",
            email: "Please enter a valid email address",
            state: "Please select a state/province",
            cc_number: "Please enter a valid credit card number",
            cc_cvc: "Please enter a valid CVV/CVC Security Code",
            password: {
                required: "Please enter a password.",
                minlength: "Your password must be at least 6 characters in length",
            }
    },
    submitHandler: function (form) {
        alert('valid');
        // you can access form by `form` tag, for example $(form).serialize()
    }

});

jQuery.extend(jQuery.validator.messages, {

    equalTo: "Your two passwords do not match"

});


// if ($("#purchase_premium").valid()) {
//  alert('valid');
//  e.preventDefault();
//              //$("#purchase_premium").submit();
//          } else {
//              e.preventDefault();
//          }



});

此外，如果您想在表单有效时执行某些操作，请使用 submitHandler处理程序:

$("#purchase_premium").validate({
    // set some properties
    // messages and 
    // rules
    submitHandler: function(form) {
        alert('valid');
        // you can access form by `form` tag, for example $(form).serialize()
    }
});

此外，您的 html 无效。您使用:

<input id="last_name" name='last_name' type="text" placeholder="Last Name">

但是你必须使用:

<input id="last_name" name='last_name' type="text" placeholder="Last Name" />

请注意此/符号位于末尾。

关于javascript - jQuery 验证插件无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23503842/

文章推荐： javascript - 如何根据表单的内容更改跨度的内容？

文章推荐： opencv - 您如何将对象检测器应用于给定视频的每一帧？

文章推荐： python - 基于特色的图像对齐问题

文章推荐： javascript - ie8 中生成的 html 未添加不透明度

html - 多个背景相互叠加(正常、拉伸(stretch)、正常)
自从我 faced an issue由于背景图片对于不同分辨率的内容来说太短，我尝试将背景分成 3 部分并自动拉伸(stretch)中间部分以相应地填充顶部和底部图像之间的空间。不幸的是我没能在 CS
c++ - QtCUrl post 不再有效(Linux 正常...windows 正常)
我从去年开始就在我的程序中运行这个函数(Linux 和 Windows)。现在我需要实现一个新功能，我的新构建不再运行。我还有其他使用 POST 的 CUrl 函数，结果是一样的:没问题，但我的
haskell - 正常/应用订单减少
在评估函数应用方面，Haskell 是只支持普通降阶还是也支持应用降阶？我是否认为正常顺序是 Haskell 惰性的原因？最佳答案 GHC 运行时不使用术语缩减策略，因为那会非常低效。事实上，GHC
python - 多处理比单个(正常)处理花费的时间更长
怎么来的multi使用多处理池对多个“进程”上的数据进行分段和处理的函数比仅调用 map 慢(8 秒)。功能(6 秒)？ from multiprocessing import Pool import
c++ - OpenGL glVertexAttribPointer 正常
假设我正在渲染一个 3d GL_TRIANGLE。该对象需要 3 个顶点才能定义:A、B、C。我将此类数据放入缓冲区并通过 glVertexAttribPointer 将其绑定(bind)到着色器。
css - 字体粗细(正常、粗体……)
我有一个字体的三个文件，普通的，粗体的和浅色的。由于 font-weight:light 不存在，我该如何在 font-face 上设置 light 呢？顺便问一下，font-weight:ligh
C free() 下一个尺寸无效(正常)
我是 C 的新手，我似乎无法弄清楚什么似乎是一个非常简单的指针问题。我的程序将行号添加到文件中。它逐行读入文件，然后在每行的开头添加一个行号。它在每个文件上都可以正常工作，如下所示: soccer@s
c++ - 正常 block 后检测到堆损坏
我有以下代码，我不确定为什么当它命中 Myclass 的析构函数时我会收到堆损坏检测错误。我相信我正在正确地释放内存？？ #include #include using namespace std
java - 正常 - RPN 转换
有什么方法可以将“正常”数学符号解释为逆波兰符号 (RPN)..？例如1) 2 + 3*4 - 1 = 234*+1-2) 5 (4-8) = 548- 你可以假设遵循 BODMAS 规则并且必须首
css - 三星和苹果默认浏览器样式错误，Chrome 正常
http://www.ergotopia.de/ergonomie-shop/ergonomische-kissen/orthopaedisches-sitzkissen的手机页面应该看起来像右边(检
iOS 无法找到插件，Android 正常
我正在 Phonegap/Cordova 中构建一个应用程序。应用目前相当简单，但确实需要网络状态和地理定位插件才能工作。到目前为止，我已经在 Android 上开发了该应用程序(目前它仅由一些基本
python - TfidfVectorizer 出错但 CountVectorizer 正常
我一整天都在做这个，但没有运气我设法在一行 TfidfVectorizer 中消除了问题这是我的工作代码 from sklearn.feature_extraction.text import C
android - 按下按钮后应用程式当机，但 Action 正常
也许有人看到一个错误，问题是当我按btn2 (button 2)和btn3 (button 3)应用程序crashes时，但操作仍然有效，即video正在运行并且PDF打开，而button 1正常工作
java - 正常 Activity 和选项卡 Activity
我正在开发一个应用程序。它的第一页是登录屏幕。成功登录后，我想将用户带到选项卡式 Activity 。我怎样才能在安卓中做到这一点？谢谢最佳答案在 Android 中，启动 Activity 是通
Vim 正常!发送文字字符串而不是空白字符
我不确定我在这里做错了什么。 :normal! I### 当我对一个单词执行此命令时，我想要的最终结果是: ### word 但是我得到了这个: ###word 最佳答案 Vim 的 :normal是
c - 正常 block 后检测到堆损坏(#63)
我必须将 2 个静态矩阵发送到分配动态矩阵的函数，将矩阵 1 乘以矩阵 2，并返回新矩阵的地址。请注意，COMM 很常见。我尝试删除 free_matrix 行，它工作正常。 void main()
c - GList 行为错误 - 下一个大小无效(正常)
我在我的一个项目中使用 Gnome libglib 并遇到了一个奇怪的错误。我可以输入 GList 的元素数量看起来仅限于 45 个。在第 45 个元素处，它给出了此错误 40 counter 41
c - 获取窗口的当前尺寸，无论最小/正常/最大化状态如何
我正在尝试获取“顶级”HWND 的尺寸。即，我想要 Firefox/Windows 资源管理器等的主 HWND 的当前尺寸。窗口。如果窗口最小化， GetWindowRect() 将不起作用。 Get
php - 什么是索引 - 正常 - 全文 - 唯一
相同的标题:什么是索引 - 正常 - 全文 - 唯一？最佳答案普通索引用于通过仅包含行数据的切片或散列来加速操作。全文索引向数据库的全文搜索 (FTS) 引擎指示它应该将数据存档在给定字段中，以
c++ - gcc - 定义模板时出现多重定义错误(vc++ 正常)
我正在使用 EnumParser来自 here它在 VC++ 中编译得很好，但是使用 gcc 我有这样的错误: ./Terminator.o: In function `EnumParser::Enu

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery 验证插件无法正常工作