0

我第一次使用 Jquery Validation Plugin,尽管搜索和观看示例我无法实现它。我正在尝试验证诸如“用户名”和“密码”字段之类的简单内容。

目标是在我在表单上进行时向用户提供反馈。如果输入不正确的值,它应该会自动显示错误。我应该添加 ShowErrors() 方法吗?

部分问题很可能是我仍然不知道使用 Jquery 验证插件的基本要求是什么。

有人可以帮忙吗?

对于以下 HMTL 代码(非常类似于 twitter 更改密码代码的副本),我有下面的 JS。

HTML:

<form id="account-password" class="form-horizontal" id="password-form" method="POST" action="">
    <!--
        <div id="settings-alert-box" class="alert hidden">
        <i id="settings-alert-close" class="close"></i>
        </div>
    -->
    <input value="PUT" name="_method" type="hidden">
    <input name="authenticity_token" value="f6b609b04af68cb4c46128cae7016513ea9062a9" type="hidden">
    <fieldset class="control-group">
        <label for="current_password" id="account3" class="control-label">
            Current password</label>
        <div id="account3" class="controls">
            <input id="current_password" name="current_password" type="password">
            <p>
                <a href="/account/resend_password" id="forgot_password">Forgot your password?</a>
                <span id="reminder_sent" style="visibility: hidden">Reminder sent!</span>
            </p>
        </div>
    </fieldset>
    <div id="password-match-pair">
        <fieldset class="control-group">
            <label for="user_password" id="account3" class="control-label">New password</label>
            <div id="password_strength" class="controls">
                <input id="user_password" name="user_password" type="password">
                <small id="password_strength_feedback" class="help-inline help-error" style="display: none;">
                </small>
            </div>
        </fieldset>
        <fieldset class="control-group">
            <label for="user_password_confirmation" id="account3" class="control-label">Verify password</label>
            <div class="controls">
                <input id="user_password_confirmation" name="user_password_confirmation" type="password">
                <small id="password_match" class="help-inline help-error" style="display: none;">Passwords don't match</small>
            </div>
        </fieldset>
    </div>
    <hr>
    <div class="form-actions">
        <button id="submit-data" class="btn btn-info" type="submit" disabled="">Save changes</button>
    </div>
</form>

JS:

$(document).ready(function(){

    $('#account-form').validate({

        rules: {

            current_password:{
                required: true,
                minlength: 5
            },
            user_password:{
                required: true,
                minlength: 5

            },
            user_password_confirmation:{
                required: true
                equalTo: '#user_password'
            },

        },
        messages: {

            current_passwords:{
                required: 'You need to type of current password',
                    minlength: 'Minimum 5 charaters'
            },
            user_passwords:{
                required: 'Verify password',
                    minlength: 'Minimum 5 charaters'
            },
            user_passwords_confirmation:{
                required: 'You need to type a new password',
                equalTo: 'Passwords dont match'
            }
        }
    });
})
4

1 回答 1

0

看起来好像您没有正确选择带有 jquery 的表单:

更改$('#account-form')$('#account-password')

http://jsfiddle.net/Mqk5t/

此外,在您的messages配置中,s取消每个属性,因为您的 html id 上没有 s

于 2013-07-18T18:36:06.203 回答