need to disable tooltip on focusing input (jquery) - html

<input type="text" class="form-control" id="datepickerFrom" placeholder=" " name="From" onchange= "errorCheck()" required>
Need to disable tooltip as shown in attached image (using jquery and bootstrap in my code. tried many ways but not disabling.

Prevent autocomplete of any field (might not work):
<input type="text" class="form-control" id="datepickerFrom" placeholder="" name="From" onchange="errorCheck()" autocomplete="nope" required />
Explanation:
autocomplete still works on an despite having
autocomplete="off", but you can change off to a random string, like
nope.
Here you can set readonly attribute to input because you are using datepicker so no need to give input via keyboard.
<input type="text" class="form-control" id="datepickerFrom" placeholder="" name="From" onchange="errorCheck()" readonly required />

Add autocomplete="off" to your input

Related

Which of the following input element variations will show a numeric keypad in mobile browsers?

what is the correct code. Any idea.
<input type="text" pattern="[0-9]*"/>
<input type="number"/>
<input type="text" keyboard="numeric"/>
<input type="text" keyboard="number11"/>
You should use the following input, both will work:
<input type="number" />
<input type="tel" />
It depends. If you use <input type="number"> the browser will render it as a numerical input containing the up and down buttons to cycle the value. If you want it to be only numbers, but without the buttons, then use the pattern.

Using two class attributes

I am using jQuery validationEngine.js plugin for validating input fields. It requires me to add a class="validate[required] text-input" so it can validate when submit the form. But I have class="form-control" and, due to this, the validation is not working. If I remove class="form-control" validation will work but input box will be misaligned. Is there any way I can keep both? Or any other solution for this problem ? Thanks!
<input
name="selectAgent"
type="text"
class="form-control"
id="selectAgent"
class="validate[required] text-input"
>
Add all your classes at once. Having two class declarations can cause an error.
Use (notice how form-control is added to the end of your class with a space that is how you can add another class)
<input
name="selectAgent"
type="text"
id="selectAgent"
class="validate[required] text-input form-control"
>
Instead of
<input
name="selectAgent"
type="text"
class="form-control"
id="selectAgent"
class="validate[required] text-input"
>

Unable to use mouse on text fields, have to use tab

I've had this weird situation just popup where I'm unable to use my mouse on a form I'm creating. It's requiring me to tab through the text fields. if I click on the second field it just pushes me back to the first field, i have to tab!
this is the form totally simple, it has something to do with the labels but I have never had issues before.
BTW: no JS or CSS in this form or page
my example:
<form>
<label for="username"*Username label>
<input type="text" name="username" tabindex="1" id="username">
<label for="password"*Password*label*>
<input type="password" name="password" tabindex="2" id="password">
<input type="submit" class="button" value="Login" name="submit" >
</form>
This is the proper way to format inputs with labels. This should fix your problem.
<label for="username">*Username*<input type="text" name="username" tabindex="1" id="username"/></label>
<label for="password">*Password*<input type="password" name="password" tabindex="2" id="password"/></label>
demo: http://jsfiddle.net/ZFZgt/

No 'Save Password' Prompt by any browser for my form

My form is attached below, and I have tried many things I've found in other forums, but to no avail. I cant get the browser to prompt a 'Save Password'. Where am I going wrong. Hope someone can help. Thanks.
<form id="frmlogin" action="/index" method="post" enctype="application/x-www-form-urlencoded" autocomplete="on">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="landing_username" name="username" type="text" value="" name="username" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="landing_password" name="password" type="password" value="" name="password" />
<submit id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn">Login</submit>
</form>
Try to clean the HTML a bit, maybe it helps:
<form id="frmlogin" action="/index" method="post">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="username" name="username" type="text" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="password" name="password" type="password" />
<input id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn" value="Login" />
</form>
the form attribute enctype is by default application/x-www-form-urlencoded so you don't need to specify it
the labels for attribute should contain the id, not the name of the associated input
element IDs should be unique
the attribute name is defined twice for both password and username
the attribute autocomplete is by default on
the input value is not required, so you don't need to add it to the inputs with an empty string
the submit button should be an input of type submit
Some of these changes are only optimizations and the code could work fine without them, but others, such as ensuring the unique id of each tag, are fixes and they are strongly recommended even if the browser displays the form properly.

Not able to set 'readonly' on text input box

Is there any obvious reason why this input box is editable?
<input id="username" name="username" class="textfield70pc" readonly="readonly" type="text" value="My username" />
It seems kind of pointless having to use javascript / jquery to disable this text box.
If you're looking for it to be grayed out, add the DISABLED attribute:
<input id="username" name="username" ... disabled="disabled" />