Javascript: how to bring focus to an element, and show a warning message

Question

Preface, I really don't know javascript at all.

I am trying to validate the email address of a form. If validation fails, I would like to focus on the invalid email field, and show a warning message. The below code properly returns true or false if the "focusElement" line is removed. However, it always returns true with that line included (presumably because the line is invalid and the code does not execute. Is there a proper/simple way of focusing on this element and showing the message?

function validateForm(formElement) 
  {
    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
    if(emailPattern.test(formElement.tfEmail.value))
    {
        return true;
    }
    else
    {
        focusElement(formElement.tfEmail,'Please enter a valid e-mail address.');
        return false;
    }
  }

If you don't really know JavaScript, suggest you Google jQuery, and it will make everything much, much esier — Brian Leishman, Dec 06 '11 at 18:53
Try putting `return false;` at the end of your `focusElement()` function. Otherwise, check your Javascript for syntax errors, because if your validation function errors out before returning `false`, the form will be submitted as if it had returned `true`. — Aaron, Dec 06 '11 at 18:54
Don't try to validate an email address with a regular expression. See this post: http://stackoverflow.com/questions/201323/what-is-the-best-regular-expression-for-validating-email-addresses At least make sure your expression allows the plus character. If anything, use an expression like this: `/.+@.+/`. — gilly3, Dec 06 '11 at 19:00
...or `/.*/s` (kidding, of course. @gilly3 don't you think that's a little broad for email validation?) — Aaron, Dec 06 '11 at 19:14

score 2 · Answer 1 · answered Dec 06 '11 at 18:51

Use .focus() and alert()

...
else
{
    alert('Please enter a valid e-mail address.');
    formElement.tfEmail.focus();
    return false;
}

If you would like the functionality to be in a separate function like your example:

...
else
{
    focusElement(formElement.tfEmail, 'Please enter a valid e-mail address.');
    return false;
}

function focusElement(obj, msg)
{
    alert(msg);
    obj.focus();
}

score 1 · Answer 2 · answered Dec 06 '11 at 18:52

1

Try:

alert("Ur err msg");
document.getElementById("yourEmailFieldId").focus();

answered Dec 06 '11 at 18:52

Sudhir Bastakoti

99,167
15
158
162

score 1 · Accepted Answer · answered Dec 06 '11 at 18:53

1

function focusElement(el, message) {
    alert(message);
    el.focus();
}

answered Dec 06 '11 at 18:53

Chris

4,393
1
27
33

all answers are right and helpful. chose this one for being first – ab11 Dec 06 '11 at 19:05
@ab11, Why not choose based on content, effort, documentation and links/additional info provided? – James Hill Dec 06 '11 at 19:06
2

@ab11, I'm not offended at all! I should have worded my comment better. I was trying to point out that choosing an answer because it's first is not a great way of selecting an answer - especially for those who visit this question later in an attempt to solve their problem. The answer you chose has no explanation - it's just code. My answer has two links to MDN so you can understand the functions you're using as well as text explaining them a bit. I'm not looking for rep, just trying to help. In fact, **please don't mark mine as the answer**. Just consider what I'm saying for future questions. – James Hill Dec 06 '11 at 19:33

score -1 · Answer 4 · answered Dec 06 '11 at 18:58

-1

You should try use jQuery and jQuery Validate for this task.

jQuery is the most used JavaScript framework, it can simplify a lot of any tasks in JavaScript.

jQuery Validate is a very used plugin for validation, based on jQuery.

answered Dec 06 '11 at 18:58

Adilson de Almeida Jr

2,761
21
37

Javascript: how to bring focus to an element, and show a warning message

4 Answers4