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

Question

所以我使用jQuery来定位react.js表单来改变类并影响引导类。它适用于名称和电子邮件，但是当我获得密码时，它会中断。图形变化很好，但分区并没有变成“有成功”。

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不更新密码有什么不同？

编辑：

我通过一些调试该类的#passDiv是相同的情况下即#emailDiv是form-group has-feedback has-successundefined发现。为什么会这样？

Answer 1

找到了darn首都D.这是最让你疯狂的事情。