jQuery, react.js, bootstrap，验证密码

所以我使用jQuery来瞄准react.js表单来更改类并影响引导类。它可以很好地输入姓名和电子邮件，但当我输入密码时，它就坏了。字形改变很好，但是div没有变成"has-success"。

form.jsx

var Form = React.createClass({
render: function () {
    return(
        <div className="container form-border">
        <h2>Enter your info to subscribe.</h2>
        <form id="testForm">
            <InputGroup divId="nameDiv" className="has-warning" for="nameInput" id="nameInput" type="text" placeholder="Name" glyph="glyphicon-warning-sign" required="required" spanId="nameGlyph">Name</InputGroup>
            <InputGroup divId="emailDiv" className="has-warning" for="emailInput" id="emailInput" type="email" placeholder="Enter email" glyph="glyphicon-warning-sign" required="required" spanId="emailGlyph">Email</InputGroup>
            <InputGroup divID="passDiv" className="has-warning" for="passInput" id="passInput" type="password" placeholder="Password" glyph="glyphicon-warning-sign" required="required" spanId="passGlyph">Password</InputGroup>
            <div className="form-group">

InputGroup.jsx

var InputGroup = React.createClass({
render: function() {
    return(
        <div id={this.props.divId} className={this.props.className + " form-group has-feedback"}>
                <label className="control-label" for={this.props.for}>{this.props.children}</label>
                <input type={this.props.type} className="form-control" id={this.props.id} placeholder={this.props.placeholder} required={this.props.required} />
                <span id={this.props.spanId} className={"glyphicon " + this.props.glyph + " form-control-feedback"}></span>
        </div>
        );
    }
});

formverification.js

var nameGlyph= $("#nameGlyph");
var nameDiv = $("#nameDiv");
var emailGlyph= $("#emailGlyph");
var emailDiv = $("#emailDiv");
var passGlyph= $("#passGlyph");
var passDiv = $("#passDiv");
$("#nameInput").on("input", function() {
    nameDiv.removeClass("has-warning").addClass("has-success");
    nameGlyph.removeClass("glyphicon-warning-sign").addClass("glyphicon-ok");
});
$("#emailInput").on("input", function() {
    emailDiv.removeClass("has-warning").addClass("has-success");
    emailGlyph.removeClass("glyphicon-warning-sign").addClass("glyphicon-ok");
});
$("#passInput").on("input", function() {
    passDiv.removeClass("has-warning").addClass("has-success");
    passGlyph.removeClass("glyphicon-warning-sign").addClass("glyphicon-ok");
});
$("#nameInput").change( function() {
    if (validName($(this).val())) {
        nameGlyph.removeClass("glyphicon-remove").addClass("glyphicon-ok");
        nameDiv.removeClass("has-error").addClass("has-success");
    } else {
        nameGlyph.removeClass("glyphicon-ok").addClass("glyphicon-remove");
        nameDiv.removeClass("has-success").addClass("has-error");
    };
});
$("#emailInput").change( function() {
    if (validEmail($(this).val())) {
        emailGlyph.removeClass("glyphicon-remove").addClass("glyphicon-ok");
        emailDiv.removeClass("has-error").addClass("has-success");
    } else {
        emailGlyph.removeClass("glyphicon-ok").addClass("glyphicon-remove");
        emailDiv.removeClass("has-success").addClass("has-error");
    };
});
$("#passInput").change( function() {
    if (validPass($(this).val())) {
        passGlyph.removeClass("glyphicon-remove").addClass("glyphicon-ok");
        passDiv.removeClass("has-error").addClass("has-success");
        alert("Succeeded");
    } else {
        passGlyph.removeClass("glyphicon-ok").addClass("glyphicon-remove");
        passDiv.removeClass("has-success").addClass("has-error");
    };
});
//CHANGE VALIDATION DEFINITIONS HERE
function validName(name) {
    if (name == "null" || name == "" || name.length < 3) {
        return false;
    } else {
        return true;
    }
};
function validEmail(email) {
    if (email == "" || email == "null") {
        return false;
    } else {
        if (email.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:'.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?'.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) {
            return true;
        } else {
            return false;
        };
    };
};
function validPass(pass) {
    if (pass == "null" || pass == "" || pass.length < 8) {
        return false;
    } else {
        return true;
    }
};

使#passDiv不更新的密码有什么不同?

我通过调试发现，在#emailDiv为form-group has-feedback has-success的同样情况下，#passDiv的类为undefined。为什么会这样?