Swap default field value using pure JavaScript

Question

I've written some code in jQuery for removing/replacing the default value of an e-mail field on focus and blur events. Its' working fine,

But I wanted it in JavaScript .. I've tried several times but I couldn't succeed.

here's my jQuery Code

    $(document).ready(function(){
    var email = 'Enter E-Mail Address....';
    $('input[type="email"]').attr('value',email).focus(function(){
        if($(this).val()==email){
            $(this).attr('value','');
        }
    }).blur(function(){
        if($(this).val()==''){
            $(this).attr('value',email);
        }
    }); 
});

can anyone tell me how to do it in JavaScript,

check this out http://stackoverflow.com/questions/46155/validate-email-address-in-javascript — Sibu, Nov 02 '12 at 06:29
Before I edited it, your title had _absolutely nothing_ to do with your code. "Validation" makes sure something follows a certain format. Your code simply removes/replaces the default field value on focus/blur events, which is very different from _validation_. — Sparky, Nov 02 '12 at 06:47

score 2 · Answer 1 · answered Nov 02 '12 at 07:26

Assuming <input type='text' id="email_field"/>

var email = 'Enter E-Mail Address....';
var emailField = document.getElementById("email_field");
emailField.onfocus = function(){
  removeDefaultText(this);
}
emailField.onblur = function(){
  setDefaultText(this);
}

function removeDefaultText(element){
  var defaultValue = 'Enter E-Mail Address....';
  if(element.value == defaultValue){
    element.value = "";
  }
}

function setDefaultText(element){
  var defaultValue = 'Enter E-Mail Address....';
  if(element.value == ''){
    element.value = defaultValue;
  }
}

score 1 · Answer 2 · edited Apr 19 '14 at 15:32

1

try

function validEmail(e) {
    var filter = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
    return String(e).search (filter) != -1;
}

with jQuery

var userinputmail= $(this).val();
var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i

if(!pattern.test(userinputmail))
{
  alert('not a valid e-mail ');
}

You can also try the following regex for other validation (I think this will helpful)

Matching a Username => /^[a-z0-9_-]{3,16}$/
Matching a Password => /^[a-z0-9_-]{6,18}$/
Matching a URL => /^[a-z0-9_-]{6,18}$/

edited Apr 19 '14 at 15:32

Jason Aller

3,541
28
38
38

answered Nov 02 '12 at 06:26

NullPoiиteя

56,591
22
125
143

yeah great ... but as I've done in jQuery when I click on that e-mail field the default message gets disappeared .. how to that part in javascript ... I used focus() for that but It didn't work ... Any idea ?? – Shreeuday Kasat Nov 02 '12 at 06:30
Look at the jQuery code in the OP's question. It's not validating a email address. It's automatically adding/removing the default value... that's what he's really asking about. – Sparky Nov 02 '12 at 06:36

score 1 · Answer 3 · answered Nov 02 '12 at 07:41

Apparently you're trying to display a placeholder value, when there is no other value.

In any modern browser, you might simply use this:

<input type="text" class="email" placeholder="Enter E-Mail Address..." />

Unfortunately that excludes older IEs, so an approach for vanilla JavaScript could be like this:

// grab all input[type="email"] elements
var emailFields = document.getElementsByTagName('INPUT').filter(function(input) {
  return input.type === 'email';
});

var placeholder = 'Enter your E-Mail Address...';
// watch onfocus and onblur on each of them
emailFields.forEach(function(input) {
  input.onfocus = function() {
    // clear only if the value is our placeholder
    if (input.value === placeholder) {
      input.value = '';
    }
  }

  input.onblur = function() {
    // set the value back to the placeholder, if it's empty
    if (input.value === '') {
      input.value = placeholder;
    }
  }
});

Hope that suits your needs.

score 0 · Answer 4 · edited May 23 '17 at 11:33

You can use regular old javascript for that:

function IsEmail(email) {
  var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

======

using new regex
demo http://bit.ly/Hzbq4i
added support for Address tags (+ sign)

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailAddress);
};

if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here */ }

NOTE: keep in mind that no 100% regex email check exists!

check this link

yeah great ... but as I've done in jQuery when I click on that e-mail field the default message gets disappeared .. how to that part in javascript ... I used focus() for that but It didn't work ... Any idea ?? — Shreeuday Kasat, Nov 02 '12 at 06:33
can u show a jsfiddle.net such that i can see what the problem is — Ghostman, Nov 02 '12 at 06:34
Look at the jQuery code in the OP's question. It's not validating a email address. It's automatically adding/removing the default value... that's what he's really asking about. — Sparky, Nov 02 '12 at 06:37

Swap default field value using pure JavaScript

4 Answers4