[英]jQuery, react.js, bootstrap, Verifying a password
So I'm using jQuery to target a react.js form to change classes and affect the bootstrap class. 因此,我使用jQuery来定位react.js表单以更改类并影响bootstrap类。 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". glyphicon可以很好地更改,但是div不会更改为“ has-success”。
form.jsx 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 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 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? 导致#passDiv
无法更新的密码有何不同?
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
. 我通过一些调试该类发现#passDiv
是undefined
相同的情况下即#emailDiv
是form-group has-feedback has-success
。 Why would this be? 为什么会这样呢?
找到了织补的首都D。这是使您疯狂的最小的事物。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.