jQuery, react.js, bootstrap, Verifying a password

Question

So I'm using jQuery to target a react.js form to change classes and affect the bootstrap class. It works fine for name and email, but when I get to password, it breaks. The glyphicon changes fine, but the div doesn't change to "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;
    }
};

What's different about the password that makes #passDiv not update?

Edit:

I found through some debugging that the class of #passDiv is undefined under the same circumstances that #emailDiv is form-group has-feedback has-success . Why would this be?

Answer 1

找到了织补的首都D。这是使您疯狂的最小的事物。