Develop Reference

Faking a login w/Javascript

I'm creating a fake login experience in a pre-existing prototype. I think my problem is that there's already a click event on the button that advances it to the next div (it's a single page setup with divs that slide in) and I need to add the below validation functionality to the same button. Here's what I have so far:
$('#login_button').click(function(e){
var username_input = $('input[placeholder*="Hint"]'),
password_input = $('input[placeholder*="Password"]'),
username = $(username_input).val(),
password = $(password_input).val(),
login_errors = 0;
if ((username == '') || (password == '')) {
console.log("Please enter your username and password.");
login_errors = 1;
} else if ((username == 'my_username') && (password == 'my_password')) {
console.log("Username and password are correct.");
} else {
console.log("Your username or password are incorrect. Retry.");
login_errors = 1;
}
if (login_errors != 0){
e.preventDefault();
}
});
I'm getting a little lost there at the end. I can get the button to validate the input and to advance to the next page, but I don't know how to get it to do both of these things at the same time.

Here's my solution:
In my project, I had to refactor to sort out some logic. I made a fiddle that worked right away and helped clarify things for me:
jsfiddle.net/kapunahele/0c9htr4o

Alternative for keyup function

am working in a popup when we click login a popup opens with fields !!! i want to check username and password with database before login button fired.. used ajax with keyup function for password field!
but keyup is firing for every character typed in password field... but the requirement is after typing password field ajax should be called and result should be displayed... is there any alternative for keyup?
now am getting as "wrong password for every character typed" and after entring correct password it will login,... but i want to show error as wrong password when user completely enters password (if password is wrong)
<script type="text/javascript">
$(document).ready(function() {
$("#upwd").change(function()
//$('#upwd').on('input', function()
//$('#upwd').keyup(_.debounce(doSomething , 500), function() {
var upwd = $("#upwd").val();
var uemail = $("#uemail").val();
var msgbox = $("#status");
//alert(uemail);
//alert(upwd);
//setTimeout(function() {
//if($('#upwd').val() == upwd){
$.ajax({
type: "POST",
url: "checkl_login.php",
data: "uemail="+ uemail,
success: function(msg){
$("#status").ajaxComplete(function(event, request){
if(msg == 'OK') {
msgbox.html(msg);
//return false;
} else {
msgbox.html(msg);
}
});
}
});
return false;
});
});
</script>
error displayed in status id in span......
checkl_login.php code is aalso perfect.....

Try using .focusout() event as shown :-
$("#upwd").on("focusout",function(){
//..your code..
});
and in addition of these events ,use a login button also and check validations on the click of the button.

Use the change event instead of keyup.

IMHO it's better:
to use keyup (it allows to handle any keyboard changes. For example, removing the symbol by backspace)
to handle 'paste' (because user may copy/paste password but not type it)
to validate password if user does not press a key during some period of time (for example, within 1 second) - setTimeout and clearTimeout should help
to abort ajax request if user starts to type when ajax request is in progress
I.e. you may try something like the following:
$(document).ready( function() {
var ajax_h;
var delayMilliseconds = 1000; // i.e. = 1 second
var timeoutId;
function checkAuth() {
if (ajax_h) {
ajax_h.abort();
}
ajax_h = $.ajax(
// PUT YOUR CODE HERE
);
}
$("#upwd").on('keyup paste', function () {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(checkAuth, delayMilliseconds);
});
});

Jquery - detect and get the url from text using jquery

I have textarea and I want to detect when the user will finish TYPING or PASTING a url. I want to catch that url an send it to php.
I looked at many solutions from google, but they all seems to add a anchor tag around the link which I don't want to do.
I tried using this regexp I found in a solution on this website, but it did not work:
/(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
the problem with it is that as soon I type something like http://, it will automatically send that string only.
I don't want to write a regexp with finite list of TLDs. What ways can I archive this?
this is the code:
$(document).ready(function() {
$('#write-post-textarea').keyup(function() {
if(isUrl($(this).val())){
//Show the url in an alert box
alert($(this).val());
}else{
//do something if its not a url
}
});
function isUrl(s) {
//var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
return regexp.test(s);
}
});

Use keyup event along with keycode validation to make sure enter or space button pressed before start validation.
$("#write-post-textarea").keyup(function (e) {
if (e.which == 13 || e.which == 32) { // 32 may be for space bar click
if(isUrl($(this).val())){
//Show the url in an alert box
alert($(this).val());
}else{
//do something if its not a url
}
}
});

I think the problem you have is that whenever you press a key it checks url once. So as soon as you type in something that matches the regexp it sends. You can try set a timer like this:
var timer;
$(document).ready(function() {
$('#write-post-textarea').keyup(function() {
var $this = $(this);
clearTimeout(timer);
setTimeout(function ()}
if(isUrl($this.val())){
//Show the url in an alert box
alert($(this).val());
}else{
//do something if its not a url
}
}, 2000);
});
function isUrl(s) {
//var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/
return regexp.test(s);
}
});
So that timer will be clear when you are typing, and only run the code when you stop.

I want to detect if a user types a certain string into a textbox

I have a textbox that looks like this
<%= Html.TextBoxFor(model => model.ContactAddress, new { autocomplete = "off", maxlength = "75" })%>
in my javascript i have this
$('.save_button_cont').click(function (e) {
var addr1 = $('#ContactAddress').val();
if(addr1.indexOf("box") > -1) {
alert("HEY NO P.O. BOXES ALLOWED ");
}
document.forms[0].submit();
});
i was hoping that this would pop up the alert before posting if the user had 'box' in the textbox. it doesnt work though.
I want to show an alert if the user enters the string 'box' in their address (the textbox).
EDIT: on the submit i am going to use a confirm box to verify that the user wants to continue. thanks for the help

Using
$("#textboxid").blur(function(){
if( $("#textboxid").val() == "box"){
alert("box typed!");
}
});
this will make your life easy!

Try this -
$('.save_button_cont').click(function (e) {
var addr1 = $('#ContactAddress').val();
if(addr1.indexOf("box") > -1) {
alert("blah");
}else {
alert('Bleh');
}
alert("TEST");
$('form').eq(0).submit();
});

You can do this:
$('.save_button_cont').click(function (e) {
var addr1 = $('#ContactAddress').val();
if (addr1.indexOf("box") > -1) alert("blah");
else alert('Bleh');
$('#formID').submit();
});

Instead of:
if(~addr1.indexOf("box")) {...} else {...}
Try
if(addr1 === "box") {...} else {...}

You could use regex to test the string for the occurrence of "box". This will allow you to do a case-insensitive search:
$('input[type="submit"]').click(function(e) {
e.preventDefault();
var input = $('#test').val();
if (/box/i.test(input)) {
alert("bad");
} else {
alert("good");
$("form").submit();
}
});
You should also put the "submit" function in your "else" statement so the form only submits on validation success.
NOTE: this could cause unwanted issues if the user happens to live on "box street".

How to add another statement on keypress on email validation with jQuery

Validations is working fine, if valid email is entered, displays a hidden box if not valid is showing a message error on a overlay, but how to check if keydown or return? any ideas guys?
This is my code, which can also be accessed in a jsFiddle:
function validateEmail() {
var validEmail = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
$('#user_email').blur(function(){
if (validEmail.test(this.value)) {
$('.masked-check').fadeIn(300)
}
else {
$('.masked-check').fadeOut(300);
$('.overlay').append('<div class="alert alert-error" id="errors"></div>');
showOverlay($('#errors').html('Please enter a valid email...'));
}
});
}
validateEmail();
I not sure if this is the way to do it but works for me now, the only issue is not listening to a keypress keyup or keydown. Here is the updated http://jsfiddle.net/creativestudio/bKT9W/3/ I am not sure is this is the best way to do it but works for now.
function validateEmail() {
var validEmail = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
$('#user_email').blur(function(){
$('.masked-check').hide();
if (validEmail.test(this.value)) {
$('.masked-check').fadeIn(300)
}
else {
$('.masked-check').fadeOut(300);
$('.overlay').append('<div class="alert alert-error" id="errors"></div>');
showOverlay($('#errors').html('Please enter a valid email...'));
}
if ($('#user_email').val()=='') {
$('.masked-check').hide()
}
});
}
validateEmail();

I like the idea of fade in/out based on valid/invalid input.
I played around a bit and following seem to be working for me ok: http://jsfiddle.net/yc9Pj/
function validateEmail(){
var validEmail = /^\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
$('#user_email').keyup(function(){
if (validEmail.test(this.value)) {
$('.masked-check').fadeIn(300)
}
else {
$('.masked-check').fadeOut(300);
//alert('Please enter a valid email');
}
});
}
validateEmail();​
please note, that I adapted regex for email based on this reply: Using a regular expression to validate an email address
Moreover keyup worked best for me, as keypress didn't handle backspace (solution found here: jQuery: keyPress Backspace won't fire?)

I believe what you're trying to achieve is for the email validation to run after each key-stroke and to keep notifying the user if their email was valid or not until it is valid.
There is a jQuery .keypress() event to identify a keypress event.
I got this working here:
http://jsfiddle.net/bKT9W/2/
EDIT: I believe Peter's answer below is much better: https://stackoverflow.com/a/13298005/1415352
He suggests a better regex and also the .keyup() event which solves the backspace issue which arises when using .keypress()

Change your function "validateEmail" to the following:
function validateEmail(){
var validEmail = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
$('#user_email').keydown(function(event){
if (event.keyCode !== 13) {
return;
}
if (validEmail.test(this.value)) {
$('.masked-check').fadeIn(300)
}
else {
//$('.masked-check').fadeOut(300);
alert('Please enter a valid email');
}
});
}