I'm creating a signup model form with a react-responsive-modal library. I wrote my Modal like this
<Modal open={this.state.openCreateAlbum} onClose={this.onCloseModalCreate}>
<div className="modal-body">
<h2>Get Started Absolutely<span> Free!</span></h2>
<span className="subtitle">No credit card needed</span>
<form className="contact-form form-validate3" novalidate="novalidate">
<div className="form-group">
<input type="text" name="name" id="name" placeholder="First Name" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input className="form-control" type="email" name="email" placeholder="E-mail" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input type="password" name="pass" className="form-control" placeholder="Password" required="" autocomplete="off" aria-required="true" />
</div>
<input className="btn btn-md btn-primary btn-center" id="sign_up" type="button" value="Sign Up" />
</form>
</div>
</Modal>
Notice that for First Name field I'm not using className=form-control and for other fields, I'm using that className.
The problem I got is when I run that. I cannot enter text to email and password field but it's fine with the first name field. I don't know why and how to fix that. I followed a tutor video and he didn't have that issue. Here is the link to the video https://www.youtube.com/watch?v=YLQXEHDXnlU
Ps: Im using this library for Modal component https://www.npmjs.com/package/react-responsive-modal
Related
I have a react app that has a couple of inputs. The problem is, whenever I navigate to the page, it auto-fills all the fields with previously entered data on Microsoft Edge (The new one). I use Materialize for my styling. I implement my form like so:
<form onSubmit={this.handleSubmit} autoComplete='off' className="login-form">
<div className="input-field">
<input
placeholder='Type email here'
id="email"
type="email"
required
className="validate contact-input"
onChange={this.handleChange}/>
<label
className="active"
htmlFor="email">Email</label>
</div>
<div className="input-field">
<input
placeholder='Type password here'
id="password"
type="password"
required
className="validate contact-input"
onChange={this.handleChange}/>
<label
className="active"
htmlFor="password">Password</label>
</div>
<div className="input-field col s6">
<button className="btn z-depth-2 login-btn">
Sign In
</button>
</div>
</form>
Some solutions I have tried that do not work include:
<form autoComplete="off">
...
</form>
<form autoComplete="new-password">
...
</form>
<input autoComplete="off" />
<input autoComplete="new-password" />
<input autoComplete="none" />
Anyone know how to fix this?
Try this :
<input type="text" autocomplete="off" list="autocompleteOff"
id="fieldId" name="fieldname" placeholder="Placeholder here" />
Answer from here : Disable input text suggestions in Edge?
I am trying to figure out how to take either the TextField component or use the Input and InputLabel components to make it so that I have a label and the textfield is to the right of the label?
You can try this :
<div>
<form onSubmit={this.onSubmitHandler}>
<label htmlFor="name">Name : </label>
<input type="text" id="name" onChange={this.onChangeHandler}/>
<label htmlFor="age">Age : </label>
<input type="text" id="age" onChange={this.onChangeHandler}/>
<label htmlFor="hair">Hair : </label>
<input type="text" id="hair" onChange={this.onChangeHandler}/>
<button>Add New</button>
</form>
</div>
This will give you something like this :
I'm converting a project to use Semantic-UI-React and a form is triggering on every change. The old form looked like this and worked as intended:
<div className="entryForm">
<form onSubmit={this.handleSubmit}>
<span className="formLabel">Location:</span>
<input type='text' name="location" placeholder="Location"
onChange={this.handleChange} autoComplete="off" /><br/>
Date Activity:
<input type='text' name="activity" placeholder="Activity"
onChange={this.handleChange} autoComplete="off"/><br/>
Cuisine:
<input type='text' name="cuisine" placeholder="Cuisine"
onChange={this.handleChange} autoComplete="off"/>
<button type="submit" value="submit" hidden="hidden"/>
</form></div>
The Semantic form looks like this and displays both SUBMIT and HELP on every change in the form:
<Form onSubmit={console.log("SUBMIT")}
onChange={console.log("HELP")}>
<Form.Field inline>
<label>Location:</label>
<Input name='location'
placeholder='Enter a neighborhood here'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Activity:</label>
<Input name='activity'
placeholder='Enter a a fun activity'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
<Form.Field inline>
<label>Cuisine:</label>
<Input name='cuisine'
placeholder='What do you want to eat'
onChange={this.handleChange}
autoComplete="off"/>
</Form.Field>
</Form>
What's going on?
onSubmit={(() => console.log("SUBMIT"))}
That fixed it as well as adding a submit button got it working
Some time post request takes query string i.e localhost/?password=123456 Don't know why do we need to add button type="button" or type="submit" please suggest thanks
<form name="login" novalidate>
<div class="row">
<input type="text" required name="email" id="username" ng-model="email" class="with-border" autofocus=true auto-focus>
</div>
<div>
<input type="password" required name="password" id="password" ng-model="password" class="with-border" >
</div>
<a class="pull-left recover-password f-pass-valign" href="#!/forgotpassword">Forgot password?</a>
<div class="form-group">
<button ng-click="login(user.email, password)" type="button" class="btn btn-danger">Login</button>
</div>
</form>
<form name="login" novalidate method="post">
<div class="row">
<input type="text" required name="email" id="username" ng-model="email" class="with-border" autofocus=true auto-focus>
</div>
<div>
<input type="password" required name="password" id="password" ng-model="password" class="with-border" >
</div>
<a class="pull-left recover-password f-pass-valign" href="#!/forgotpassword">Forgot password?</a>
<div class="form-group">
<button ng-click="login(user.email, password)" class="btn btn-danger">Login</button>
</div>
</form>
use method as post if you setup button type button then it will work on button click only
When I reload the browser and show login page. Two input field for username and password are autofill with chrome.
But the login button is greyout and show "not allowed" cursor when hover on.
If I click anywhere in the page, the login button will be enable.
Here is my code for login form:
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>
</form>
You may try autocomplete false.
<form name="form">
<div class="form-group">
<input type="email" id="login-email" class="form-control"
name="email"
ng-model="vm.data.email"
required
placeholder="Email Address" autocomplete="false">
</div>
<div class="form-group">
<input type="password" id="login-password" class="form-control"
name="password"
ng-model="vm.data.password"
required
placeholder="Password" autocomplete="false">
</div>
<div class="form-group">
<button type="submit" class="btn btn-rectangle btn-primary"
ng-click="vm.submit()"
ng-disabled="form.$invalid">Sign in
</button>
</div>