jQuery自定義驗證消息

Question

我在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>

Answer 1

下面的代碼對我來說似乎很好。 確保在所有依賴庫之前包含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>

jQuery自定義驗證消息

問題描述

1 個解決方案

解決方案1
0 已采納 2014-10-28 11:24:10

jQuery自定義驗證消息

問題描述

1 個解決方案

解決方案1 0 已采納 2014-10-28 11:24:10

解決方案1
0 已采納 2014-10-28 11:24:10