jQuery自定义验证消息

尼古拉斯·彼得(Nicolas Peter)

我在jquery中制作了联系表单,但在显示自定义验证消息时遇到了一些困难。它仅显示带有消息的小弹出窗口:“请填写表格”,而不显示我指定的自定义消息。我尝试了不同版本的验证插件,但没有用。我遵循了多个教程,所有教程都获得了相同的结果。你们中的一些人可以让我走上正确的道路,以便我自己完成此工作吗?

jQuery查询

$(document).ready(function () {
$('#contact_form').validate({
    rules: {
        name: {
            required: true
        }
    },
    messages: {
        name: {
            required: "come on, you have a name don't you?"
        }
    },
    submitHandler: function (form) {
        $(form).ajxSubmit({
            type: "POST",
            data: $(form).serialize(),
            url: "",
            success: function () {
                $('#contact_form :input').attr('disabled', 'disabled');
                $('#contact_form').fadeTo("slow", 0.15, function () {
                    $(this).find(':input').attr('disabled', 'disabled');
                    $(this).find('label').css('cursor', 'default');
                    $('#success').fadeIn();
                });
            },
            error: function () {
                $('#contact_form').fadeTo("slow", 0.15, function () {
                    $('#error').fadeIn();
                });
            }
        });
    }
});
});

的HTML

<form method="post" name="contact" id="contact_form">
                    <div class="row uniform collapse-at-2">
                        <div class="6u">
                            <input type="text" name="name" id="name" placeholder="Name" required="" />
                        </div>
                        <div class="6u">
                            <input type="email" name="email" id="email" placeholder="Email" required="" />
                        </div>
                    </div>
                    <div class="row uniform">
                        <div class="12u">
                            <input type="text" name="subject" id="subject" placeholder="Subject" required="" />
                        </div>
                    </div>
                    <div class="row uniform">
                        <div class="12u">
                            <textarea name="message" id="message" placeholder="Message" rows="6" required=""></textarea>
                        </div>
                    </div>
                    <div class="row uniform">
                        <div class="12u">
                            <ul class="actions">
                                <li>
                                    <input type="submit" class="special" value="Send Message" id="submit" name="submit" />
                                </li>
                                <li>
                                    <input type="reset" name="reset" id="reset" value="Reset Form" /></li>
                            </ul>
                        </div>
                    </div>
                </form>
詹森·约翰

下面的代码对我来说似乎很好。确保在所有依赖库之前包含jQuery主库(例如,自动完成或其他插件)

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Autocomplete</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>

<script>

$(document).ready(function () {
$('#contact_form').validate({
    rules: {
        name: {
            required: true
        }
    },
    messages: {
        name: {
            required: "come on, you have a name don't you?"
        }
    },
    submitHandler: function (form) {
        $(form).ajxSubmit({
            type: "POST",
            data: $(form).serialize(),
            url: "",
            success: function () {
                $('#contact_form :input').attr('disabled', 'disabled');
                $('#contact_form').fadeTo("slow", 0.15, function () {
                    $(this).find(':input').attr('disabled', 'disabled');
                    $(this).find('label').css('cursor', 'default');
                    $('#success').fadeIn();
                });
            },
            error: function () {
                $('#contact_form').fadeTo("slow", 0.15, function () {
                    $('#error').fadeIn();
                });
            }
        });
    }
});
});

</script>
</head>

<body>

<form method="post" name="contact" id="contact_form">
                    <div class="row uniform collapse-at-2">
                        <div class="6u">
                            <input type="text" name="name" id="name" placeholder="Name" required="" />
                        </div>
                        <div class="6u">
                            <input type="email" name="email" id="email" placeholder="Email" required="" />
                        </div>
                    </div>
                    <div class="row uniform">
                        <div class="12u">
                            <input type="text" name="subject" id="subject" placeholder="Subject" required="" />
                        </div>
                    </div>
                    <div class="row uniform">
                        <div class="12u">
                            <textarea name="message" id="message" placeholder="Message" rows="6" required=""></textarea>
                        </div>
                    </div>
                    <div class="row uniform">
                        <div class="12u">
                            <ul class="actions">
                                <li>
                                    <input type="submit" class="special" value="Send Message" id="submit" name="submit" />
                                </li>
                                <li>
                                    <input type="reset" name="reset" id="reset" value="Reset Form" /></li>
                            </ul>
                        </div>
                    </div>
                </form>
</body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery验证自定义验证器,在元数据标签和消息中具有多个参数

来自分类Dev

如何在ASP NET MVC中自定义不干扰验证的JQuery消息?

来自分类Dev

JQuery在多个位置(表单顶部和表单级别)验证自定义错误消息

来自分类Dev

Laravel自定义验证消息

来自分类Dev

Spring自定义验证消息

来自分类Dev

jQuery验证自定义错误消息的位置

来自分类Dev

jQuery自定义验证消息

来自分类Dev

Codeigniter自定义验证消息?

来自分类Dev

如何基于注释属性创建自定义验证消息?

来自分类Dev

Laravel中的自定义验证消息

来自分类Dev

Laravel扩展验证自定义消息

来自分类Dev

Keycloak自定义验证输出消息

来自分类Dev

jQuery验证-自定义规则

来自分类Dev

laravel上的自定义验证消息

来自分类Dev

jQuery验证自定义方法的麻烦

来自分类Dev

jQuery验证,带有包含确认的自定义错误消息

来自分类Dev

jQuery验证,显示ID为ID的自定义消息

来自分类Dev

规则的jQuery验证程序自定义错误消息位置

来自分类Dev

jQuery表单URL验证自定义消息

来自分类Dev

自定义最小和最大错误消息以进行jQuery不干扰验证

来自分类Dev

jQuery验证自定义方法规则和带有动态名称的消息?

来自分类Dev

jQuery验证插件未显示自定义消息

来自分类Dev

jQuery验证自定义错误

来自分类Dev

角度ngMessages自定义消息验证

来自分类Dev

使用Jquery验证添加自定义错误消息

来自分类Dev

Laravel自定义验证消息

来自分类Dev

JQuery 验证自定义错误消息未显示

来自分类Dev

如何在 jQuery 自定义验证器方法中格式化消息

来自分类Dev

尝试在 jQuery 验证中执行自定义消息时出错

Related 相关文章

热门标签

归档