Input is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
<div>
<Modal show={this.state.show} handleClose={this.hideModal} >
<div className="blkOverlay">
{/* This is Login Form to log in to your profile */}
<div className="formContent modal-main">n>
<h2>Welcome Back <span>Brandon!</span></h2>
<form show={this.state.show} handleClose={this.hideModal}>
<input type="text" name="email" placeholder="Email Address" />
<input name="password" type="text" placeholder="Password" passwordToggle="true" iconShow="eye" iconHide="eye-blocked" />
<div className="passContent">
<div className="checkingPass">
<input name="checkbox" type="checkbox"></input>
<p className="passFont">Remember Password</p>
</div>
<p className="passFont">Remember Password</p>
</div>
<input type="button" name="button">Login</input>
<div className="social-media-button">
<input type="button" name="button">Sign in with Facebook</input>
<input type="button" name="button">Sign in with Google</input>
</div>
<p className="passFont">Don't have an account? <span>Create a account</span></p>
</form>
</div>
{/* This is Sign up to create a account */}
</div>
</Modal>
</div>
What is the proper way to create a form in reactjs with getting this error about the input?
You should not put "Sign in with Facebook/Google" inside the input-tag. This is the reason why it is complaining about children. In React, a child is another tag inside a tag.
You should use:
<input type="button" value="Sign in with Facebook">
Related
I'm working on a project which required ant design datepicker along with bootstrap.I'm not sure whats making this datepicker move out of screen. Is there something I need to do with bootstrap classes to fix this? I have shared my screenshot.thanenter image description here]1]1
const form= () => (
<form onSubmit={onFormSubmit}>
<div className="form-group">
<label className="btn btn-outline-secondary btn-block m-3">Add image
<input type="file" name="image" onChange={handleImageChange} accept="image/*" hidden/>
</label>
<input className="form-control m-2" type="text" name="title" placeholder="title" onChange={handleChange} value={title}/>
<textarea className="form-control m-2" type="text" name="content" placeholder="content" onChange={handleChange} value={content}/>
<AlgoliaPlaces className="form-control ml-2" placeholder="location" defaultValue={location} options={config} onChange={handleSearch} style={{height:"50px"}} />
<input className="form-control m-2" type="number" name="price" placeholder="price" onChange={handleChange} value={price}/>
<input className="form-control m-2" type="number" name="bed" placeholder="Number of beds" onChange={handleChange} value={bed}/>
</div>
**<DatePicker className="form-control m-2"/>**
<button className="btn btn-outline-primary m-2">Add</button>
</form>
)
return(
<div>
<div className="container-fluid p-5 text-center">
<h2>Add </h2>
</div>
<div className="container-fluid">
<div className="row">
<div className="col-md-10">
{hotelForm()}
</div
<div className="col-md-2">
<img src={preview} alt="preview-image" className="img img-fluid m-2" />
<pre>{JSON.stringify(values,null, 2)}</pre>
</div>
</div>
</div>
</div>
)
It looks like you are missing ant design css stylesheet.
Try to add the following line at the root of your app :
import 'antd/dist/antd.css';
I'm write application with react, and I have a issue to use the tag input
enter code here:import React, { Component } from 'react'
enter code here :import { Formik } from 'formik';
enter code here:export class Login extends Component {
render() {
return (
<div class="header">
<div class="container">
<div class="logo"></div>
<div class="form">
<form>
<div class="inputemail">
<label class="labelinput" for="">email or phone</label>
<input class="input" type="text">
<div class="inputpassword">
<label class="labelinput" for="">Password</label>
<input class ="input"value type="password">
<a class="linkpassword" href="#">forget password?</a>
<input class="inputbtn" type="submit" value="entrar">enter</input>
</input>
</div>
</input>
</div>
</form>
</div>
</div>
</div>
)
};
}
export default Login;
when the react don't accept the tag input. someone know why this happen?
First of all, you have to use className="" instead of class="".
Second, You have an unclosed input <input class="input" type="text"> You have to close it first.
And the last part is also inappropriate for react.
<input class="inputbtn" type="submit" value="entrar">enter</input>
</input>
Please clean your HTML firstly. All tags have to be closed. Even such as and
If this doesn't solve the problem, please send us your error.
you have a sintax error in your code and your missing closing tags, use this:
render() {
return (
<div class="header">
<div class="container">
<div class="logo" />
<div class="form">
<form>
<div class="inputemail">
<label class="labelinput" for="">
email or phone
</label>
<input class="input" type="text" />
<div class="inputpassword">
<label class="labelinput" for="">
Password
</label>
<input class="input" value type="password" />
<a class="linkpassword" href="#">
forget password?
</a>
<input class="inputbtn" type="submit" value="enter" />
</div>
</div>
</form>
</div>
</div>
</div>
);
}
when I upload the login page the button will be gray when I click on the screen the button will turn to blue focus is missing please help me with this
Html Code:
<main id="frontpage">
<form id="login-form" name="login_form" novalidate>
<div ng-class='{"input-block": true, "input-block-focus": username_focused, "input-error": login_form.username.$touched&&login_form.username.$invalid, "input-block-disabled":submit_button_value}'>
<div>
<label class="labels">Username</label>
</div>
<input class="loginForm_input" name="username" ng-model="user.username" ng-focus="username_focused=true" ng-blur="username_focused=false"
placeholder="Enter your username" type="text" ng-disabled="submit_button_value" required>
</div>
<div ng-class='{"input-block": true, "input-block-focus": password_focused, "input-error": login_form.password.$touched&&login_form.password.$invalid, "input-block-disabled":submit_button_value}'>
<div>
<label class="labels">Password</label>
</div>
<input class="loginForm_input" name="password" ng-model="user.password" ng-focus="password_focused=true" ng-blur="password_focused=false"
placeholder="Enter your password" type="{{password_type}}" ng-disabled="submit_button_value" required>
<span ng-click="showHidePassword()" ng-class='{"eye-icon-open":password_visible, "eye-icon-close":!password_visible, "pull-right": true}'></span>
</div>
<div>
<button ng-class='["btn", "btn-primary", "horizontal-center", "submit-button",{"submit-button-loading": !submit_button_value }]'
ng-disabled="login_form.$invalid || submit_button_value" ng-click="signin()">
<span ng-if="!submit_button_value">Login</span>
<span ng-if="submit_button_value" class="fa fa-spinner fa-spin"></span>
</button>
</div>
</form>
</main>
As the classes "btn", "btn-primary", "horizontal-center", "submit-button" are common, try the following:
<button class="btn btn-primary horizontal-center submit-button" ng-class="{'submit-button-loading': !submit_button_value }"
ng-disabled="login_form.$invalid || submit_button_value" ng-click="signin()">
I have a react component in which a user can add teams and then players to these teams. I use react fetch for posting and getting the data from the database. My question is, how can I automatically update the component to show the newly added teams by the user? Currently I have to manually refresh to see changes.
Do I have to add another function to the button onClick to refresh the whole page or is there a better method in react to just refresh the component?
My render looks like this:
render() {
return (
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron text-center">
<form>
<label for="teamName">Team name</label>
<input type="text" class="form-control" id="teamName"></input>
<button type="submit" onClick={this.addTeams} class="btn btn-primary">Submit</button>
</form>
<br></br>
Registered teams:
<br></br>
{
this.state.data.map((dynamicData, key) =>
<div class="black" id="panels">
<PanelGroup accordion id="accordion"
activeKey={this.state.activeKey}
onSelect={this.handleSelect}>
<Panel bsStyle="primary" eventKey={dynamicData.id}>
<Panel.Heading>
<Panel.Title toggle onClick={() => this.showPlayers(key)}>{dynamicData.name} <i class="fas fa-angle-down"></i></Panel.Title>
</Panel.Heading>
<Panel.Body collapsible>Add players</Panel.Body>
<Panel.Body collapsible>
<div id="dynamicInput">
<input type="text" class="bottomroom" placeholder="Player name" id={"playerName"+key}></input>
<input type="text" class="bottomroom" placeholder="Player number" id={"pnr"+key}></input>
<input type="hidden" class="bottomroom" id={"teamId"+key} value={dynamicData.id}></input>
{this.state.players.map((playersData, key) =>
<p>{playersData.name}</p>
)}
</div>
<br></br>
<button type="submit" onClick={() => this.addPlayers(key)} class="btn btn-success button"><i class="fas fa-check-circle"></i></button>
</Panel.Body>
</Panel>
</PanelGroup>
</div>
)
}
</div>
</div>
</div>
</div>
);
}
My form is as shown below. But on click of submit button the form is submitting with out validation...I am using spring security so xhr call won't allow to redirect on another page from server(so I have to give the url in action). If I remove "novalidate" page is taking default html validation
<form name="loginForm" id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" novalidate>
<div class="panel-body">
<div class="form-group has-feedback">
<input type="email" name="j_username" ng-model="j_username"
class="form-control placeholder-color" placeholder="Email"
ng-pattern="/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/"
required autocomplete="off" />
<div class="form-devider"></div>
<div ng-messages="loginForm.j_username.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.email.required" />
</div>
<div class="has-error" ng-message="pattern">
<spring:message code="peak.enter.valid.email" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<input type="password" name="j_password" id="j_password"
placeholder="Password" class="form-control placeholder-color"
ng-model="j_password" required autocomplete="off" /> <%-- <input
type="hidden" name="url" id="url" placeholder="Password"
ng-model="link"
ng-init="link='${pageContext.request.contextPath}/j_spring_security_check'" /> --%>
<div class="form-devider"></div>
<div ng-messages="loginForm.j_password.$error"
ng-if="loginForm.$submitted">
<div class="has-error" ng-message="required">
<spring:message code="peak.password.required" />
</div>
</div>
</div>
</div>
<div id="login-error-box1" style="display: none"></div>
<button type="submit"
class="btn btn-block custome-btn-orange pbi-mt15">
<spring:message code="peak.login" />
</button>
</form>
Thanks in advance
Take a look at this plnkr : http://plnkr.co/edit/rZaKXEp7vspvEerFtVH8?p=preview
$scope.validate = function(isValid,$event){
console.log(isValid);
console.log($scope.loginForm);
if(!isValid){
$event.preventDefault();
}
}
You need to create an angular controller with a function to run on ng-submit. That function will look for if form is invalid and stops it from posting the form.
which allows you to see your error messages.