Question

所以我使用jQuery来定位react.js表单以更改类并影响bootstrap类。它适用于名称和电子邮件，但是当我获得密码时，它会中断。 glyphicon变化很好，但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无法更新的密码有什么不同？

修改

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

Answer 1

找到了darn资本D.这是让你疯狂的最小的东西。

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

1 个答案: