The title seems easy, but I need help.
I have a form with a field input "email" of which value is null until the user fills it up. Okay, on click of the submit button, I call the function validate() which is:
function validate(){
var email=document.getElementById("email");
if(!(/[\w-\.]{3,15}#([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/.test(email))) {
email.setAttribute('value','Insert a correct email');
email.style.border="2px solid red";
} else {
alert("Valid field"); // This is to test it works
email.style.border="2px solid #63ce40";
this.form.submit();
}
}
What I want to do here is that if the email inserted does not meet the requirements (is not valid), change the value of the input with "Insert a correct email".
If the field is empty and I click submit, it works perfectly, but if I insert text and click submit, the only change will be the field getting a 2px red border, but no text change.
I would like to know what I have to do so that when I click submit the wrong email that was written, is removed and replaced by the text "Insert a correct email".
The input is:
<li>
<input type="text" id="email" name="email"
value="" onfocus="this.value=''" size="40"/>
</li>
And the submit button I'm using:
<input id="bsubmit" type="button" value="Submit"
name="submit" onclick=";this.disabled=true;validate();
this.disabled=false;"/>
Thank you.
It's good that you were trying to use setAttribute at all because it's an important method, but the problem is that you don't want to modify the value attribute in this case, which is a part of the DOM, but you want to modify the <input> element's value property.
email.value = 'Insert a correct email';
http://jsfiddle.net/XJZwm/
Try this email.value = 'Insert a correct email'; instead of email.setAttribute('value','Insert a correct email');
Related
I have this HTML code:
<input type="text" class="input_discount" id="discountCode" placeholder="ENTER YOUR TEXT">
<button type="button" class="btn apply_btn" id="changeType" required/>APPLY</button>
JS:
$('#changeType').click(function(){
$('#discountCode').attr('type','password');
});
The code is working fine. But when I enter the text in the input field and click on apply button, then it converts the input type to password. But when I directly click on apply button and then write inside the input field it shows password format. Can anybody tell me how to prevent this if input field is empty and user clicks on apply button the input type remains focused and should be in text format and after filling the details it should convert to password format.
Why your code was not working.
When there was nothing entered, as per your code it was converting the type to text.
Solution I applied
While the button is clicked, check if textbox is empty or not.
Note: I am considering space as a valid character in the input box, because it can be used for password. If you want to eliminate space you can use
$('#discountCode').val().trim().length
Working Demo
$('#changeType').click(function(e) {
if ($('#discountCode').val().length) {
$('#discountCode').attr('type', 'password');
} else {
$('#discountCode').attr('type', 'text');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="input_discount" id="discountCode" placeholder="ENTER YOUR TEXT">
<button type="button" class="btn apply_btn" id="changeType" required/>APPLY</button>
I am trying to focus a form-field after running a validation-function on a form-field which is triggered "onblur" event of that field. What I'm trying to do is get the focus back on that field if it is not valid but it doesn't seem to do it. I've looked for answers on the web but unable to find a solution.
HTML:
<input type="text" id="name" name="name" value="" onblur="validateName();"/>
JavaScript:
function validateName() {
var name = document.getElementById("name");
if (name.value==""||!isNaN(name.value)){
alert("Please enter a valid name. You have left the field blank or entered a number.");
document.getElementById("name").focus();
}
};//END validateName
document.getElementById("name").focus(); is not working as expected.
The code works for me, but to make it a bit more "clean", I did some changes for you:
HTML:
You can "pass" the element with the function call (this), that way, we don't have to look for it anymore in the function itself.
<input type="text" id="name" name="name" value="" onblur="validateName(this)"/>
JavaScript:
The element that is blurred, is passed and stored in element, we call the "focus()" function directly on that.
function validateName(element) {
if (element.value==""||!isNaN(element.value)){
alert("Please enter a valid name. You have left the field blank or entered a number.");
element.focus();
}
};//END validateName
i'm having difficulties with validating the value of a text box element in the html with the addeventlistener in my javascript. It does not properly validate my input in the following ways :
1)Showing "field is empty" even when I have values in that textbox.
2)Only validates when i click submit. <-- (how do i perform the validation as the user clicks out of the text box? )
The following is the relevant html code (with bootstrap classes):
<div class ="col-lg-8">
<div class="form-group">
<label for="inputfirstName" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfirstName"
placeholder="Enter First Name" />
</div>
</div>
The following is the relevant javascript code to valdiate that the First name text box field is not empty and if it is it should return a custom validation error
window.addEventListener('load',init);
function init()
{
var firstname = document.getElementById("inputfirstName");
firstname.addEventListener('onmouseclick',validateFirstname(firstname));
}
function validateFirstname(e){
var checker = e.value;
if (checker == ""){
e.setCustomValidity("This field must not be blank !");
}
}
I am not really sure, when you want to validate your input.
Currently, you are listening to the user clicking into your textbox and performing the validation in that very moment.
However, since you are only adding the validation error with your call to e.setCustomValidity it won't display until you post your form. This is by design of setCustomValidity. This is explained in more details here: How to force a html5 form validation without submitting it via jQuery
To validate your textbox after the user entered his text, you would use the input and change events. Input fires when the user types something into your textbox, change after the user leaves the textbox. To trigger the validation regardless of the user ever focusing on that field, you also have to set your input to "required". Then to display your message instead of the standard required message of HTML5 you also have to add the invalid event to your event listeners. You can find a more refined answer here with the complete code on how to accomplish this here: Set custom HTML5 required field validation message
<input type="text" class="form-control" id="inputfirstName"
placeholder="Enter First Name" required="required"/>
window.addEventListener('load',init);
function init()
{
var firstname = document.getElementById("inputfirstName");
firstname.addEventListener('input',validateFirstname(firstname));
firstname.addEventListener('change',validateFirstname(firstname));+
}
function validateFirstname(e){
var checker = e.value;
if (checker == ""){
e.setCustomValidity("This field must not be blank !");
}
else{
e.setCustomValidity("");
}
}
I want to disable an input field, but when I submit the form it should still pass the value.
Use case: I am trying to get latitude and longitude from Google Maps and wanna display it, but I don't want the user to edit it.
Is this possible?
I wanna Disable an Input Field on a
form and when i submit the form the
values from the disabled form is not
submitted.
Use Case: i am trying to get Lat Lng
from Google Map and wanna Display it..
but dont want the user to edit it.
You can use the readonly property in your input field
<input type="text" readonly="readonly" />
I know this is old but I just ran into this problem and none of the answers are suitable. nickf's solution works but it requires javascript. The best way is to disable the field and still pass the value is to use a hidden input field to pass the value to the form. For example,
<input type="text" value="22.2222" disabled="disabled" />
<input type="hidden" name="lat" value="22.2222" />
This way the value is passed but the user sees the greyed out field. The readonly attribute does not gray it out.
you can also use the Readonly attribute: the input is not gonna be grayed but it won't be editable
<input type="text" name="lat" value="22.2222" readonly="readonly" />
Input elements have a property called disabled. When the form submits, just run some code like this:
var myInput = document.getElementById('myInput');
myInput.disabled = true;
I have a usual login form consisting of two input fields, one for login, one for password. I am currently trying to add a control that will show entered password as plain text, so user can check it for typos.
The problem is that browsers (at least Firefox) do not allow dynamic changing of type attribute of input fields, so I cannot just change type="password" to type="text". Another problem is that browsers do not allow to get value of password field, so I can't create a new input type="text" and set its value to the password's one. I've seen several different approaches to this task, including this one, but they are working only if the password is typed and fail when browser autofills the password.
So, any suggestions to do this are welcome. I am using jQuery.
You can do something like this:
<input type="password" id="password">
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password
If I may, I don't think it's a great idea to show the password in text, for the following reasons:
It's not commonly done, so it will be confusing to the user
It means you are open to over-the-shoulder viewing of the password
I also think, if you just want to help users avoid typos, give them more chances before the password is disabled. I think the typical "3" that most sites implement is not really required, I'd suggest "10" attempts, or perhaps "5", if you wish to be really conservative, is quite acceptable. Just count it down for them, and let them resolve typos on their own.
Just my humble opinion.
I have never tried this myself but can't you just access the value property of the element?
if you have something like...
<input id="pw" name="pw" type="password" />
Then in JavaScript / jQuery...
var pass = document.getElementById('pw').value;
$('pw').val()
There is no any possibility to show autofilled password for security reasons. Anyone could see your password on your computer for this page if this is possible.
You have to deal with following for complete solution:
javascript is not allowed - then you should not display choose password checkbox
autocomplete is turned on - as I wrote, you're not able to show password filled this way. Eaighter switch off autocomplete or hide show password until user re-type password.
Autocomplete switch off by this jQuery
$('input').attr('autocomplete', 'off');
For adding checkbox on the fly you can use following jquery-showPassword plugin available at http://www.cuptech.eu/jquery-plugins/
$('.show-password').change(function() {
if ($("#form-fields_show-password").attr('checked')) {
var showValue = $('#form-fields_password').val();
var showPassword = $('<input type="text" size="50" required="required" name="form- fields[password]" id="form-fields_password" class="password required" value="'+showValue+'">');
$('#form-fields_password').replaceWith(showPassword);
} else {
var hideValue = $('#form-fields_password').val();
var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">');
$('#form-fields_password').replaceWith(hidePassword);
}
});
Something like this will find the input area, and store the value in a variable called showValue. Then you can replace the element with type="password", with new html where type="text" and if the checkbox is unchecked the value will be dropped into password type field.
There is a problem with this method in that the password type value will be visible in the code, however to get round this you can always remove the value attribute from the password type and just force the user to re-type. If you can live with that in you application.
function change(){
id.type="password";
}
<input type="text" value="123456" id="change">
<button onclick="pass()">Change to pass</button>
<button onclick="text()">Change to text</button>
<script>function pass(){document.getElementById('change').type="password";} function text(){document.getElementById('change').type="text"; } </script>
Password: <input type="password" value="" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>