i have a form where every email is registered with #scoops.com but every time i have to enter #scoops.com i want that user just enter email name and #scoops.com auto fill and it will also show at the end of input field ? here it is my code
<div class="form-group" autocomplete="off">
<label>Email <span style="opacity: 0.5; font-style: italic;">(Required)</span></label>
<input autocomplete="nope" type="text" name="email" id="email" class="form-control input-lg"
placeholder="Enter Email" name="name" required=""/>
<span id="error_email"></span>
#if($errors->has('email'))
<div class="alert alert-danger">
{{ $errors->first('email') }}
</div>
#endif
</div>
i want something like this
Since you use Bootstrap: Try to wrap your mail input into an Inputgroup.
And then append the mail ending(by grouping your inputs). Also im not sure if 'autocomplete="nope"' is a state for this attribute. You should consider "off" if nope means no.
<div class="input-group">
<input autocomplete="off" type="text" name="email" id="email" class="form-control input-lg" placeholder="Enter Email" name="name" required=""/>
<div class="input-group-append">
<span class="input-group-text">#scoops.com</span>
</div>
</div>
Adding to what´s been said above, you can do something like the code below to submit the user-typed value appended with whatever text you want:
<input id="myInput">
<button onclick="submit(document.getElementById('myInput').value)"></button>
<script>
function submit(inputValue) {
const email = inputValue + "#scoops.com"
// insert here the code (like a POST request) to send the 'email' constant to wherever you want
}
</script>
Related
At first I thought it was some jerk move to make me type my username for added "security" on top of 2FA so I decided to fix it with tampermonkey and remove the autocomplete="off" attribute only to discover that there wasn't one.
Why does Chrome not offer to autofill the email input in this form? This is a link to the site.. But this is the form that is blocking autocomplete on the email address.
<form method="post" class="form-horizontal">
<h1 class="paste-page-header">Log in</h1>
<div class="form-group">
<div class="col-md-24">
<label class="paste-input-label">Email</label>
<div class="paste-input-wrapper">
<input type="text" id="email" name="email" placeholder="Email" tabindex="1" required="true" class="paste-input sl_whiteout" autofocus="autofocus" maxlength="255">
</div>
</div>
</div>
<div class="form-group col-md-24">
<button role="login-button" type="submit" tabindex="2" class="paste-primary-button" data-loading-text="<i class='icon icon-spinner icon-spin'></i>" value="Log in">Next
</button>
</div>
<span class="paste-text">Don’t have an account yet? Sign up for free.</span>
<input inert="" readonly="true" type="password" id="password" name="password" tabindex="50" style="opacity: 0.02;" aria-label="This is a hidden password field for compatibility with password managers. Please ignore this field.">
<input type="hidden" name="g" value="/console/sms/dashboard?" class="sl_whiteout">
<input type="hidden" name="t" value="182b71c36e3bb0a0a788ab671fbe875c7b46602de5f49fb3e441645b8848a76a" class="sl_whiteout">
<input type="hidden" name="CSRF" value="2869689c41323f2456ec6558c8ee7f3e4c409eda3bbed69bf10228f752a293e4" class="sl_whiteout">
</form>
After you type your email address, it will allow you to autocomplete the password, it's just this field that is a problem. And I tried this:
> x = document.getElementById('email')
<input type="text" id="email" name="email" placeholder="Email" tabindex="1" required="true" class="paste-input sl_whiteout" autofocus="autofocus" maxlength="255">
> x = document.getElementById('email')
x.autocomplete
''
So, they aren't disabling it with JS (at least not in any way that I can see.....
I'm asking so that I don't make this mistake on any of my sites and because I'm really curious how they pulled this off.
I have a form:
<form action="/index.html" method="POST" id="form">
<div id="namediv">
Full Name:
<input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"/ id="name" required/></div>
<div>
Date:
<input type="date"/>
</div>
<div id="emaildiv">
Email:
<input type="email" id="email" onblur="validateEmail()" required/><br>
<emailerror class="invisible">Incorrect email address!</emailerror>
</div>
<div id="urldiv">
Favorite webpage:
<input type="url" name="favurl"id="url" onblur="validateFavURL()" required/><br>
<urlerror class="invisible">Incorrect webpage!</urlerror>
</div>
<div>
<input type="button" value="Validate" onclick="validateAll()"/>
</div>
</form>
How can I trigger the name's pattern validity without submitting the form? I tried checkValidity() but didn't succeed. What is the exact syntax for it?
Not sure that I clearly understand the question. But the problem appears to be invalid regex. But the field does say "full name" so you'd likely need to allow a space as well.
<div>
<label>This field accepts upper and lowercase letters only</label>
</div>
<input type="text" pattern="[A-Z][a-z]+" id="name" required/>
I am making a registration form in angularJS and I use the bootstrap template for design.
This is my form and path to the form page is http://localhost:4200/signup
<form method="post" (submit)='register(username.value,email.value,password.value)'>
<div class="form-group">
<label for="name">Full name</label>
<input type="text" id="name" #username class="form-control" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="remail">Email address</label>
<input type="email" id="remail" #email class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label for="rpassword">Password</label>
<input type="password" #password class="form-control" id="rpassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
But the problem is that it when I click submit button or hit enter, It automatically refresh the page and shows Cannot POST /signup.
As this is my component.ts file
register(name,email,password) {
this.userService.registerUser(name, email, password).subscribe(data => {
if (data.success) {
console.log('reaches');
this.router.navigate(['user']);
} else {
console.log('error');
}
});
}
It is trying to go to the /signup path in post method but in component.ts file I give the path to '/user'
How can it automatically go-to /signup? And how to stop that.
Your form is trying to post data to a server. It sounds like you don't have a server which can handle the post, so you get the error.
To fix the problem, you need a server which can handle the form post.
When visiting the "reset password" route of my single-page app and looking at the Chrome browser console, I am greeted with the follwing warning:
[DOM] Password forms should have (optionally hidden) username fields for accessibility: (More info: goo.gl/9p2vKq)
Helpfully, the html of the form in question is also printed to the console in the next line, and quite clearly contains a hidden username field:
<form data-ember-action data-ember-action-436="436">
<div class="form-group">
<label for="newpasswordone">Password</label>
<input type="password" autocomplete="new-password" placeholder="Enter your new password" id="ember437" class="form-control ember-text-field ember-view" data-op-id="0">
<label for="newpasswordtwo">Password (again)</label>
<input type="password" autocomplete="new-password" placeholder="Re-enter your new password" id="ember438" class="form-control ember-text-field ember-view" data-op-id="1">
<input type="hidden" name="username" autocomplete="username" value="a_b">
</div>
<button disabled type="submit" class="btn btn-default">Reset password</button>
</form>
I tried some minor variations -- unhiding the username field, marking it readonly, moving it outside the div -- without affecting the warning.
How does Chrome expect to be served the username?
Problem occurs with Chrome 63 and 64.
I had the same problem. After some digging, I found that it needs to be an input element with the type text. By "optionally hidden" they mean that you may hide it with CSS.
If you just add an input with the name email or username chrome gives you another warning saying that input elements should have autocomplete attributes. So this is what I came up with to fix these errors:
<input
type="text"
name="email"
value="..."
autocomplete="username email"
style="display: none;"
>
You will need to manually render the actual username or email into the elements value attribute.
Also, keep in mind that inline styles are not a very good practice.
Use the hidden attribute instead of type="hidden"
<input hidden type="text" autocomplete="username" value="{{...}}">
I had this same situation.
Everything seemed be ok but I still got this verbose.
On my case helped me a relocate this userName input from end of form to begin of that.
It was my code before my changes:
<form id="changePass">
<div class='modal-dialog'>
<input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>
<div class="modal-footer">
<button type="button" id="change-password-ok-button">Ok</button>
<button type ="button" data-dismiss="modal">Close</button>
</div>
</div>
<input id="userName" name="username" autocomplete="username" value="">
</form>
And this is current code:
<form id="changePass">
<input id="userName" name="username" autocomplete="username" value="">
<div class='modal-dialog'>
<input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>
<div class="modal-footer">
<button type="button" id="change-password-ok-button">Ok</button>
<button type ="button" data-dismiss="modal">Close</button>
</div>
</div>
</form>
you must put the input tag inside another tag for example:
<form action="">
<div>
<input type="text" autocomplete="username">
</div>
<div>
<input type="password" autocomplete="password">
</div>
<div>
<input type="password" autocomplete="password">
</div>
I had this same situation in VueJs when i use rendering conditional v-if v-else and i try put input tag inside new tag and it's work for me
Though I know that this question is quite old but thought maybe it may be useful for someone .I also faced the same issue with my React app update user password and this worked for me just above the password fields without label.Excuse me for writing the React way .
<input hidden type='text' name='email' autoComplete='email' />
Basic usage :-
<form>
<input hidden type='text' name='email' autoComplete='email' />
<label htmlFor="oldPass">Enter your current password</label>
<input id="oldPass" type="password" />
<label htmlFor="newPass">Enter your new password</label>
<input id="newPass" type="password" />
</form>
After reading Jonas comment I rebuilt the project and the warning went away
I had the same warning showing in the console and this is how I fixed it:
<input hidden autocomplete="username" name="username" type="text" value="{{..}}"/>
<input hidden autocomplete="email" name="email" type="text" value="{{..}}"/>
<form class="form-asd" role="form">
<h2 class="form-signin-heading">login</h2><hr />
<label class="control-label" for="username">Username</label>
<input class="form-control" type="email" required="" placeholder="username"data-error="enter username"></input>
<label class="control-label" for="username">password</label>
<input class="form-control" type="password" required=" " placeholder="Password"></input>
<label class="checkbox"></label>
<button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>
how can we change this default message of popover of the require field "Please fill out this field "to "please enter username"
You can use setCustomValidity function when oninvalid event occurs.
Like below:-
<input class="form-control" type="email" required=""
placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>
Update:-
To clear the message once you start entering use oninput="setCustomValidity('') attribute to clear the message.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Combination of Mritunjay and Bartu's answers are full answer to this question. I copying the full example.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Here,
this.setCustomValidity('Please Enter valid email')" - Display the custom message on invalidated of the field
oninput="setCustomValidity('')" - Remove the invalidate message on validated filed.
And for all input and select:
$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");
I wanted to change the text of the textarea. This method helped
<form action="/action_page.php" method="post">
<input type="text" required placeholder="username" oninvalid="this.setCustomValidity('Error validate')" oninput="setCustomValidity('')">
<br><br>
<textarea placeholder="Ko’cha, uy, xonadon" name="address" required oninvalid="this.setCustomValidity('Majburiy maydon')" oninput="setCustomValidity('')"></textarea>
<input type="submit" value="Submit">
</form>
$("input[required]").attr("oninvalid", "this.setCustomValidity('Say Somthing!')");
this work if you move to previous or next field by mouse, but by enter key, this is not work !!!