如何通过ajax显示表单错误?

时间:2016-02-20 21:58:36

标签: javascript jquery html ajax node.js

我正在尝试显示一条消息,我从服务器验证器进入登录弹出通过ajax,但我无法得到error.message,我认为问题是在ajax代码中。这是我的ajax的一部分:

                    case 403:
                    form.find('.error-form').show(300);
                    var error = JSON.parse(jqXHR.responseText);
                    $('.error', form).html(error.message);

                    $(":submit", form).button("reset");
                    break;

我认为问题在于:

$('.error', form).html(error.message);

因为按钮没有返回默认状态,如果我输入以下代码,它会在我的弹出窗口中显示一个完整的错误

document.getElementById("alert alert-danger").innerHTML = jqXHR.responseText;

我是编程的新手,我做错了什么?

此处还有我的弹出式HTML:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="login">
<div class="modal-dialog modal-sm">
    <div class="modal-content">

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
            <h3 class="modal-title" id="mySmallModalLabel">LOGIN</h3>
        </div>
        <div class="modal-body">
            <form id="loginForm" name="loginForm">
                <div class="form-group">
                <!--<div class="form-group field-error">-->
                    <label for="username">Username</label>
                    <span class="error-message">Field can't be blank</span>
                    <input name="username" type="text" class="form-control" id="log-name" placeholder="Username">


                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <span class="error-message">Field can't be blank</span>
                    <input name="password" type="password" class="form-control" id="input-password"
                           placeholder="Password">

                    <div class="error-form">
                        <div id="alert alert-danger" class="alert alert-danger"></div>
                    </div>


                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary block">Login</button>
                </div>
                <div class="form-group">
                    <a href="#" class="btn btn-line block" data-toggle="modal" data-target="#createacc" data-dismiss="modal" aria-label="Close">Create account</a>
                </div>
            </form>
        </div>
    </div>
</div>

这是ajax

    $('#loginForm').on('submit', function () {
    var form = $(this);

    $('.error', form).html('');
    $(":submit", form).button("loading");


    $.ajax({
        url: $(this).attr('action'),
        method: "POST",
        data: form.serialize(),
        complete: function (jqXHR) {
            switch (jqXHR.status) {
                case 200:
                    window.location.href = "/";
                    break;
                case 403:
                    form.find('.error-form').show(300);
                    var error = JSON.parse(jqXHR.responseText);
                    $(':error', form).html(error.message);

                    $(":submit", form).button("reset");
                    break;

                default:
                    alert("some error has occurred");
                    $(":submit", form).button("reset");

            }

        }

    });
    return false;
});

这是服务器端代码:

    var crypto = require('crypto');
    var async = require('async');
    var util = require('util');


    var mongoose = require('lib/mongoose'),
        Schema = mongoose.Schema;

    var schema = new Schema({
        username: {
            type: String,
            unique: true,
            required: true
        },
        hashedPassword: {
            type: String,
            required: true
        },
        salt: {
            type: String,
            required: true
        },
        created: {
            type: Date,
            default: Date.now
        }
    });




    schema.methods.encryptPassword = function(password) {
        return crypto.createHmac('sha1', this.salt).update(password).digest('hex');
    };


    schema.virtual('password')
        .set(function(password) {
            this._plainPassword = password;
            this.salt = Math.random() + '';
            this.hashedPassword = this.encryptPassword(password);
        })
        .get(function() { return this._plainPassword; });




    schema.methods.checkPassword = function(password) {
        return this.encryptPassword(password) === this.hashedPassword;
    };

    schema.statics.authorize = function(username, password, callback) {
        var User = this;

        async.waterfall([
            function(callback) {
                User.findOne({username: username}, callback);
            },
            function(user, callback) {
                if (user) {
                    if (user.checkPassword(password)) {
                        callback(null, user);
                    } else {
                        callback(new AuthError("Wrong password"));
                    }
                } else {
                    var user = new User({username: username, password: password});
                    user.save(function(err) {
                        if (err) return callback(err);
                        callback(null, user);
                    });
                }
            }
        ], callback);
    };


    exports.User = mongoose.model('User', schema);




    function AuthError(message) {
        Error.captureStackTrace(this, AuthError);

        this.message = message;
    }

    util.inherits(AuthError, Error);

    AuthError.prototype.name = 'AuthError';

    exports.AuthError = AuthError;

0 个答案:

没有答案