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

发布于 2024-09-30 12:02:48 字数 972 浏览 0 评论 0原文

我正在努力将 jQuery 验证插件用于表单...请参阅下面的完整代码。虽然下面的代码检查项目名称是否为必需，但它不检查长度，并允许提交。看出什么问题了吗？

<form method="post" id="new_space" data-remote="true" class="new_space" action="/spaces" accept-charset="UTF-8">
          <label for="space_name">Name</label><br>
          <input type="text" size="30" name="space[name]" id="space_name" class="text_field">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $("#new_space").validate({
        errorLabelContainer: "#ui-dialog-errors",
        wrapper: "p",
        errorClass: "error",
        invalidHandler: function() {
            $("#ui-dialog-errors").hide().fadeIn();
        },
        rules: {
            "space[name]":{required: true, minLength: 4}
        },
        messages: {
            "space[name]":{ required: "Project Name required!", minLength: "Project Name's need 4+ characters" }
        }
    });
});
</script>

原文

I'm working to use the jQuery validation plugin for a form... see full code below. While the below is checking for the project name to be required, it's not checking length, and allows the submit. See anything wrong?

<form method="post" id="new_space" data-remote="true" class="new_space" action="/spaces" accept-charset="UTF-8">
          <label for="space_name">Name</label><br>
          <input type="text" size="30" name="space[name]" id="space_name" class="text_field">
</form>

<script type="text/javascript">
$(document).ready(function () {
    $("#new_space").validate({
        errorLabelContainer: "#ui-dialog-errors",
        wrapper: "p",
        errorClass: "error",
        invalidHandler: function() {
            $("#ui-dialog-errors").hide().fadeIn();
        },
        rules: {
            "space[name]":{required: true, minLength: 4}
        },
        messages: {
            "space[name]":{ required: "Project Name required!", minLength: "Project Name's need 4+ characters" }
        }
    });
});
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光匆匆的小流年 2024-10-07 12:02:48

将 minLength 更改为 minlength （使用小写“l”）应该可以解决此问题。

对于你的第二个问题，假设 form_submit 是你的提交按钮的 id ，这应该可以解决问题：

// Disable the submit button when first loaded
$("#form_submit").attr("disabled", "disabled");
$("input").change(function() {
    // Check if the form validates
    if($("#new_space").valid()) {
        // Enable the button
        $("#form_submit").removeAttr("disabled");
    }
});

在 JSFiddle。

Changing minLength to minlength (with lowercase "l") should fix it.

For your second question, assuming form_submit is the id of your submit button, this should do the trick:

// Disable the submit button when first loaded
$("#form_submit").attr("disabled", "disabled");
$("input").change(function() {
    // Check if the form validates
    if($("#new_space").valid()) {
        // Enable the button
        $("#form_submit").removeAttr("disabled");
    }
});

See it on JSFiddle.

回复收藏 0 原文

~没有更多了~