Question

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

目标是在表单上进行时提供用户反馈。如果键入不正确的值，它应自动显示错误。我应该添加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'
            }
        }
    });
})

Answer 1

好像你没有正确选择jquery表单：

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

http://jsfiddle.net/Mqk5t/

另外，在您的messages配置中，请关闭每个媒体资源的s，因为您的html ID上没有s

Jquery验证插件未加载

1 个答案: