Solved

Looking for an "onblur" java function to verify an email address within a form.

Posted on 2010-08-27
13
352 Views
Last Modified: 2012-05-10
I'm trying to find an onblur function that will verify an email address before the submit button is pressed.
The page loads a flash file, and I don't want to have to reload the flash to have php verify the information.

Seems as if java is going to be the most lightweight way to do this.
0
Comment
Question by:Imaginx
  • 5
  • 4
  • 3
  • +1
13 Comments
 
LVL 51

Expert Comment

by:HainKurt
ID: 33545450
try this
<script>

function validateForm(){

  if (document.forms[0]["txtEmail"].value == ""){

    alert("Please enter email!");

    document.forms[0]["txtEmail"].focus();

    return false;

  }

  return true;

}

</script>



<form action="http://goggle.ca" method=post onSubmit="return validateForm();">

<input type=text name=txtEmail>

<input type=submit value=Submit>

</form>

Open in new window

0
 
LVL 51

Expert Comment

by:HainKurt
ID: 33545456
above solution uses form submit event, not onblur... I guess submit event is the way to go...
if user never clicks email, onblur never fires... makes code not useful... so, use submit event of the form...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33545486
But pass the form - so even if the form is not the 0th form on the page it will work

<script>
function validateForm(theForm){
  if (theForm.txtEmail.value == ""){
    alert("Please enter email!");
    theForm.txtEmail.focus();
    return false;
  }
  return true;
}
</script>

<form action="http://goggle.ca" method=post onSubmit="return validateForm(this);">
<input type=text name=txtEmail>
<input type=submit value=Submit>
</form>

Open in new window

0
 
LVL 1

Author Comment

by:Imaginx
ID: 33545499
That just verifies the field isn't blank though, which is still useful over the php method - but it doesn't verify an email address..

And I probably wasn't as clear as I should have been. I shouldn't use the word "verify" because I obviously don't want it to attempt to send an email and wait for an error of some sorts ...
I want it to validate the email format after someone types it in. That's why I was thinking about onblur.
0
 
LVL 51

Expert Comment

by:HainKurt
ID: 33545543
there are lots of function on google ;) to validate emails, here is one

function validate(address) {
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   if(reg.test(address) == false) {
      return false;
   }
  return true;
}

+ above fix
<script>

function validate(address) {

   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

   if(reg.test(address) == false) {

      return false;

   }

  return true;

}



function validateForm(theForm){

  if (theForm.txtEmail.value == ""){

    alert("Please enter email!");

    theForm.txtEmail.focus();

    return false;

  }



  if (!validate(theForm.txtEmail.value))""){

    alert("Please enter a valid email!");

    theForm.txtEmail.focus();

    return false;

  }



  return true;

}

</script>



<form action="http://goggle.ca" method=post onSubmit="return validateForm(this);">

<input type=text name=txtEmail>

<input type=submit value=Submit>

</form>

Open in new window

0
 
LVL 51

Expert Comment

by:HainKurt
ID: 33545552
oops, small fix
<script>

function validate(address) {

   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

   if(reg.test(address) == false) {

      return false;

   }

  return true;

}



function validateForm(theForm){

  if (theForm.txtEmail.value == ""){

    alert("Please enter email!");

    theForm.txtEmail.focus();

    return false;

  }



  if (!validate(theForm.txtEmail.value)) {

    alert("Please enter a valid email!");

    theForm.txtEmail.focus();

    return false;

  }



  return true;

}

</script>



<form action="http://goggle.ca" method=post onSubmit="return validateForm(this);">

<input type=text name=txtEmail>

<input type=submit value=Submit>

</form>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33545555
http://regexlib.com/Search.aspx?k=email&c=-1&m=-1&ps=20


var emailRegex = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
function isEmail(email) {
  return emailRegex.test(email);
}
function validateForm(theForm){
  var email = theForm.txtEmail.value;
  if (email != "" && !isEmail((email)){ // remove the email!=""&& if you want to disallow empty emails

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33545560
okee
0
 
LVL 24

Expert Comment

by:mankowitz
ID: 33545612
see http://www.codetoad.com/javascript/form_validation_function.asp

If you have an onsubmit function that returns true, then it submits the form. If false, it won't submit the form, so you can do your validation in the onsubmit button.

<form name=form1 action=address.asp method=post onsubmit="javascript:return ValidateForm(this)">


function ValidateForm(form)
{

   if(IsEmpty(form.account_number))
   {
      alert('You have not entered an account number')
      form.account_number.focus();
      return false;
   }
 
 
   if (!IsNumeric(form.account_number.value))
   {
      alert('Please enter only numbers or decimal points in the account field')
      form.account_number.focus();
      return false;
      }
 
return true;
 
}


function isValidEmail(str) {

   return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
 

}
0
 
LVL 1

Author Comment

by:Imaginx
ID: 33756624
I can get the onSubmit to work, I was looking for an onBlur function that didn't return an alert - if just displayed a message (i.e. document.write ??)

If the the title over the form input that said:

"Please enter your email"

Would possibly turn red & bold if the input failed the test.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 33756898
NEVER use document.write after the page loaded

<script>
function validateForm(theForm){
  if (theForm.txtEmail.value == ""){
    alert("Please enter email!");
    theForm.txtEmail.focus();
    return false;
  }
  return true;
}
function validateEmail(theEmail) {
  document.getElementById('errormsg').innerHTML=(theEmail.value=="")?"Please enter email":"";
}
</script>

<form action="http://goggle.ca" method=post onSubmit="return validateForm(this);">
<input type="text" name="txtEmail" onBlur="validateEmail(this)" value="" /><span style="color:red" id="errormsg"></span>
<input type="submit" value="Submit"/>
</form>

Open in new window

0
 
LVL 1

Author Closing Comment

by:Imaginx
ID: 33756923
I thought you could use document.write after load (maybe a rookie mistake, java is not my forte')

What will happen?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 33759515
No. Document.write will wipe the current page including whatever scripts are on it.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
html input type 3 22
Having problem getting this to work 2 21
jQuery Validate 4 19
How to make this slider behave as it should with javascript 5 11
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now