Jquery if password field is empty - javascript

I'm trying to add visible text to a password field that says "Enter a password" and on click the text is cleared and you type dots. I have two inputs one of type=text and another password. The password input is hidden from the start but appears after you click on the input with the "Enter a password" instruction.
It does this http://mudge.github.com/jquery_example/ but I'm trying to make it for password fields.
HTML
<input type="text" id="password_instructions" />
<input type="password" id="password" />
The Jquery
var $password = $('#password');
$password.hide(); //hide input with type=password
$("#password_instructions").click(function() {
$( this ).hide();
$('#password').show();
$('#password').focus();
if ($password.val().length === 0) { //if password field is empty
$password.focusout(function() { //when clicking outside empty password input
$( this ).hide();
$('#password_default_value').show();
$('#password_instructions').default_value('Enter a password'); //will clear on click
});
}
});
What doesn't work:
When you fill the password input (with dots appearing) and click out the input is hidden and the #password_instruction input shows. So it's not respecting the if empty statement. For some reason it treats the input as empty even if I typed a password in.
What am I doing wrong here?

You seem to be expecting that there's some kind of "pause" after you call focus() and that the remnant of the JS code will be executed only when the enduser is finished typing the password somehow.
This is not true. The function is been executed fully in one go.
You need to move the following piece
if ($password.val().length === 0) { //if password field is empty
$password.focusout(function() { //when clicking outside password input
$(this).hide();
$('#password_default_value').show();
$('#password_instructions').default_value('Enter a password'); //will clear on click
});
}
into another standalone function:
$('#password').focusout(function() {
if ($(this).val().length === 0) { //if password field is empty
$(this).hide();
$('#password_default_value').show();
$('#password_instructions').default_value('Enter a password'); //will clear on click
}
});

Do you mean:
<input type="password" placeholder="enter password">
If you are wanting to implement this for legacy browsers, you'll have to move the check to the onBlur event. In jQuery this looks like:
$('#password').blur(function() {
if ($password.val().length === 0) { //if password field is empty
$password.focusout(function() { //when clicking outside password input
$( this ).hide();
$('#password_default_value').show();
$('#password_instructions').default_value('Enter a password'); //will clear on click
});
}
});

Related

Input password to show a div?

I'm making a website for fun, and there's a little easter egg I want to put in it where you input a password to see a hidden page on the site.
I know how to make a login form with html and I get the "input" tag for putting in the password, but I'm not sure what the "output" should be..? I also want it to display a div or span only when the correct text is entered.
It would be cool if I could have both a username and password be required to match, but I don't know how that'd work at all.
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>
Well, you need javascript for this and just an easy onclicklistener.
For example:
<button onclick="checkHidden()">Login</button>
<script>
function checkHidden()
{
if(document.getElementById("name").value == "Name" && document.getElementById("pw") == "123")
{
window.location.href = "andereSeite.html";
}
}
</script>
But obviously everyone can see the username & password.
They just need to let them show the source.
If you wanna use this secretly you need to use PHP :)
There are many tutorials out there for form + PHP.
Well, here is a simple example. Use onkeyup="" attribute to run the javascript function check_password(this) (this refers to the input-tag) after every entered character. If the password is right the div will appear with display: block/none;.
function check_password (input_element) {
//get value of input
var password = input_element.value;
//check value and show/hide the div
if (password == 'secret')
document.getElementById ('hidden_div').style.display = 'block';
else
document.getElementById ('hidden_div').style.display = 'none';
}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>

Need a pop-up saying whether form is valid or not - comes up not valid no matter what

I am trying to make a site where there are 3 fields that come with a default value. If all the fields are filled in, I want an alert to pop up saying "ok" and it will bring you to a new site. If they are left blank or not answered, I want an alert that says to fill in all the fields. The problem is, no matter what is in the fields, I get the "try again" alert.
My JS -
$(function() {
// when the text field gets focus it gets ride of the default value
//:text makes the browser check for ALL text fields
$(':text').focus(function() {
console.log('got focus');
var field = $(this);
//basically asks - is it blank? if not, put default value in
if (field.val()==field.prop('defaultValue')) {
field.val('');
}
});
$(':text').blur(function() {
console.log('lost focus');
var field = $(this);
//basically asks - is it blank? if not, put default value in
if (field.val()=='') {
field.val(field.prop('defaultValue'));
}
});
//not working....
$("#questionform").submit(function() {
if ($("#question1").val() === "" || $("#question1").prop('defaultValue')) {
alert("Please fill out all fields");
// since there is invalid input returning false will keep us from navigating to the new form
return false;
}
else {
// input is valid so we'll navigate to the new form
alert('Okay');
}
if ($("#question2").val() === "" || $("#question2").prop('defaultValue')) {
alert("Please fill out all fields");
// since there is invalid input returning false will keep us from navigating to the new form
return false;
}
else {
// input is valid so we'll navigate to the new form
alert('Okay');
}
if ($("#question3").val() === "" || $("#question3").prop('defaultValue')) {
alert("Please fill out all fields");
// since there is invalid input returning false will keep us from navigating to the new form
return false;
}
else {
// input is valid so we'll navigate to the new form
alert('Okay');
}
});
}); // end ready
And my HTML -
<form action="success.html" id="questionform">
<label for="question1" class="label">Enter your first name</label>
<br>
<input type="text" value="Question" id="question1">
<br>
<label for="question2" class="label">Enter your last name</label>
<br>
<input type="text" value="Question" id="question2">
<br>
<label for="question3" class="label">Enter your favorite color</label>
<br>
<input type="text" value="Question" id="question3">
<br>
<input type='submit' value='Submit' name="submit" id='submitme'>
</form>
<p id="result"></p>
No matter what I do or do not type in any box, it comes up invalid and will not go to the next screen.
There is a problem in your if condition.
if ($("#question1").val() === "" || $("#question1").prop('defaultValue') === $("#question1").val()) {
alert("Please fill out all fields");
// since there is invalid input returning false will keep us from navigating to the new form
return false;
} else {
// input is valid so we'll navigate to the new form
alert('Okay');
}
Use something like this because $("#question1").prop('defaultValue') will return the default value defined in the input element as value="Question". So, the second condition will always be true. That is why it will always give an error messsage. Either remove that condition or update the condition.
I hope it helps you.
You have a problem in your "if" conditions.
in JS, if you want to have "if" statement with two conditions, you should put the entire condition after each "||" operator:
if (x == y || x == z)

HTML Form: How to remember text values of button click?

If you have a form, type some text into it, and press the Enter key, whenever revisiting that form you can double-click on the input box and see the past text submissions.
I have a site that when you press Enter OR click a button, it should take whatever is in the text box and use it for data processing.
This works totally fine when not surrounded by a form but when surrounded by a form an you press the Enter key, it does not act as an enter button push, I believe it's being overridden by the form.
My goal is to have the user be able to press the Enter key as well as click the button to submit the data, but to also remember the text values that were in the text box regardless of which way you submitted the data.
What I have:
<input type="text" id="username-field" class="form-control" placeholder="username">
<input class="btn btn-default" type="button" id="get-name" value="Get Name">
Javascript
$("#get-name").click(function() {
var name = $("#username-field").val();
// ... call other function with name ...
});
$("#get-name").keydown(function(e) {
if (e.which == 13) {
var name = $("#username-field").val();
// ... call other function with name ...
}
");
What I would like to use:
<form>
<input type="text" id="username-field" class="form-control" placeholder="username">
</form>
I tried doing e.preventDefault() when the Enter key is pressed, but this does not remember the text in the input field.
I also considered doing a small cache type thing but am unsure of how I'd go about this.
Any help would be much appreciated!
Thanks!
Doesn't use form at all. Just, why you added it, if you don't use it as intended?
You either mistyped provided code copy-paste, or have errors in yours script (the $("#get-name").val() mistake).
If you want to prevent form from submission, you should e.preventDefault()-it in submission handler, and return false from it:
$('#form-id').submit(function (e) {
e.preventDefault();
// do smth. else here
...
return false;
})
Saving/retriving data with localStorage for HTML5-supporting browsers:
$(function () {
$('form input[type=text]').doubleclick(function () {
var id = $(this).attr("id");
value = localStorage.getItem("form_xxx_" + id);
// do smth. with cached value, ie:
if (value != "")
$(this).val(value); // put in textfield
});
});
$('form').submit(function (e) {
$('form input[type=text]').each(function () {
var id = $(this).attr("id");
localStorage.setItem("form_xxx_" + id, $(this).val());
});
...
// all other work
});
Note: make sure you don't put some user's personal data in browser's local storage -_-

How to set text box to appear blank after .click function

So I have a simple log in that requires a user to input values from a json file into two different text boxes ,when the user name and (in this case I have used ID as password) matches then an alert appears to say... "welcome"
After the .click function is carried out the users text still remains in the text box, how can I get both text boxes to appear blank after the .click function?
$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();
$("#loginbtn").click(function(event){
$.getJSON('result.json', function(jd) {
var id = $('#userName').val();
var name = $('#userName2').val();
var valid = false;
for (var i=0; i<jd.user.length; i++) {
if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
valid=true;
$('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');
//show the alert after loading the information
$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
$('#invalid').hide();
$('#btnhide').on('click', function(e){
//console.log('here');
e.preventDefault();
$('#loginalert').hide();
});
}
}
if (!valid) {
$('#invalid').fadeIn('slow');
$('#loginalert').hide();
}
});
}); });
username 1 and #username 2 are the text boxes - is there any way to get user name 2 to display in stars ****** when the user enters the password - this question is not that necessary but if i could also get that working that would be good.
thanks guys hope someone can help :)
is there any way to get user name 2 to display in stars ****** when
the user enters the password
You can use an input box with text property set as password. But that password masking character will be . instead of *. Not exactly sure, whether it will be a different character in some browsers.
<input type="password" id="txtPassword" />
text box to appear blank after .click function
You can set the .val() property of the jQuery objects of two those two textboxes.
$('#userName, #username2').val('');
Use <input type="password"> to show typing as stars.
Clear inputs by setting their value to be empty: $('#userName').val('');
And perhaps consider breaking your code down into a couple smaller functions so it's easier to follow.
document.getElementById("#myTextbox").value="";
This should get your textbox and set the value of it to "", which is blank.
Edit: JSFiddle
Another Method:
You can also add the script directly inside the button without using/creating a function.
<input id="inputId" type="name" />
<button onclick="document.querySelector('#inputId').value='';"> Clear </button>
Using querySelector:
<input id="inputId" type="name" />
<button onclick="click()"> Clear </button>
<script>
function click() {
document.querySelector('#inputId').value="";
}
</script>

Javascript disable input field

I have two input fields one is for a phone number another is for an email. I would like to disable one field based on the user selection. Should a user click and enter input in either field, it would disable the other and vice versa.
I have written code but it seems to only disable the email field upon entering in numbers in the phone field. Removing the numbers in the phone field removes the disabled from the email input field.
IN MY HTML
<input type="number" name="number" placeholder="hone" class="cellphone" data-cp-visibility="new-user" id="phone">
<input type="email" name="email" placeholder="enter email" class="email" data-cp-visibility="new-user" id="email">
IN JAVASCRIPT
$('#phone').live('blur',function(){
if(document.getElementById('phone').value > 1) {
$('#email').attr('disabled', true);
} else {
$('#email').attr('disabled', false);
}
});
$('#email').live('blur',function(){
if(document.getElementById('email').value > 1) {
$('#phone').attr('disabled', true);
} else {
$('#phone').attr('disabled', false);
}
});
Ultimately I what I am trying to accomplish is that a user can click in either field and then enter input, upon doing so, the other field is disabled. Should they choose to remove the text they entered, it would remove the disabled feature and then they could choose the opposite input field.
I am not sure why it only works for one field and not the other or why if you enter in 333-333-3333 in the phone field it breaks the disabled, but 33333333 works fine.
Any ideas or insight as to what I may be missing?
to fix the dash issue you are having with the phone input, you can try changing it to:
<input type="text" required="" pattern="\d{3}[\-]\d{3}[\-]\d{4}" name="phone" id="phone" data-cp-visibility="new-user" placeholder="123-345-5678">
and here is another version of the js:
var $phone = $('#phone'),
$email = $('#email');
$phone.on('keyup change', function() {
$email.prop('disabled', $(this).val() ? true : false );
});
$email.on('keyup change', function() {
$phone.prop('disabled', $(this).val() ? true : false );
});
You may use jQuery on instead of live. live is deprecated as of jQuery 1.7.
You can also look for the keyup/keydown event on the input element.
$(function(){
$('#phone').on('keyup',function(){
if($(this).val()!=="")
{
$('#email').prop('disabled', true);
}
else {
$('#email').attr('disabled', false);
}
});
$('#email').on('keyup',function(){
if($(this).val()!=="")
{
$('#phone').prop('disabled', true);
}
else {
$('#phone').prop('disabled', false);
}
});
});
Here is a working sample.
I would recommend using .on('input', ...) to listen for changes, this makes it so even if you use the increment/decrement buttons (or other forms of input) you'll trigger the event-handler. Then use .attr('disabled', boolean) to control enable/disabled state, see example below:
$(function() {
$('#phone').on('input', function() {
$('#email').attr('disabled', $(this).val() !== "");
});
$('#email').on('input', function() {
$('#phone').attr('disabled', $(this).val() !== "");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" placeholder="phone" id="phone">
<input type="email" placeholder="enter email" id="email">

Categories