Web Analytics Made Easy - StatCounter focus method help needed - CodingForum

Announcement

Collapse
No announcement yet.

focus method help needed

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    focus method help needed

    Hi I'm trying to have a user enter their email and have it added to the element in the array while the window is open. I did that below, but I wanted the form to focus if the user enters an email wrong. So if they enter chris/@yahoo.com, it would highlight the exact "/" and say "error please reenter." The same goes for other characters that don't belong. It does this now but I want it to focus on the part that is wrong. Also if the email is shorter than 5 characters I'd want it to focus on the whole 5 characters and state another error. How would I do this? Also instead of having just the check button, Is there a way to have a "Find" button as well to find emails instead of having one button do both? Any help is appreciated.
    Thank You
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Add Email Address</title>
    <script type="text/javascript">

    var emails = [];

    function checkEmail(inputvalue){
    var pattern=/^([a-zA-Z0-9_.-])[email protected]([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
    if(pattern.test(inputvalue)){
    return true;
    }
    return false;
    }

    function addEmail(form) {
    var statusBox=document.getElementById('status');
    var emailBox = document.getElementById('email_address');
    emailBox.style.borderColor = '';
    statusBox.style.display='block';
    var emailOk = checkEmail(form.email.value);
    var found = false;
    for(emailIndex in emails) {
    if(emails[emailIndex]==form.email.value) {
    found = true;
    break;
    }
    }

    if(emailOk && !found) {
    emails.push(form.email.value);
    statusBox.innerHTML = 'Email added.';
    statusBox.style.color = 'lime';
    }
    else {
    statusBox.innerHTML = found ? 'Email alread added' : 'Email invalid.';
    statusBox.style.color = 'red';
    emailBox.style.borderColor = 'red';
    emailBox.focus();
    }
    }

    function resetStyle(elId) {
    var el=document.getElementById(elId);
    el.style.backgroundColor = '';
    el.style.borderColor = '';
    el.style.color = '';
    }

    function lookUpEmails(inputBox) {
    var suggestBox = document.getElementById('suggest');
    var found = false;
    suggestBox.innerHTML = '';
    for(var emailIndex in emails) {
    if(new RegExp('^'+inputBox.value,'i').test(emails[emailIndex])) {
    suggestBox.innerHTML += "<div onclick=\"selectEmail('"+emails[emailIndex]+"');\">"+emails[emailIndex]+"</div>";
    found = true;
    }
    }
    suggestBox.style.position = 'absolute';
    suggestBox.style.top = (inputBox.offsetTop+inputBox.offsetHeight+3)+'px';
    suggestBox.style.left = inputBox.offsetLeft+'px';
    suggestBox.style.width = inputBox.style.clientWidth+'px';
    suggestBox.style.display = found ? 'block' : 'none';
    }

    function selectEmail(selectedAddress) {
    document.getElementById('email_address').value = selectedAddress;
    hideBox('suggest');
    }

    function hideBox(boxId) {
    document.getElementById(boxId).style.display = 'none';
    }

    function init() {
    document.onclick=function () {
    hideBox('suggest');
    }
    var emailBox = document.body.getElementById('email_address');
    emailBox.onclick = function (e) {
    var event = e || event;
    e.cancelBubble = true;
    return false;
    }
    }

    </script>
    </head>
    <body onload="init()">
    <div id="status">&nbsp;</div>
    <form name="signupform" action="#" onsubmit="addEmail(this);return false;">
    Input your email: <input name="email" type="text" class="inputs" id="email_address"
    value="[email protected]" size="35" maxlength="255" onkeyup="lookUpEmails(this);""><br />
    <input name="submit" type="submit" value="Check">
    <div id="suggest" style="display: none;border: 1px solid black;">&nbsp;</div>
    </form></body></html>
    Tags: None
  • #2
    Please look at the forum guidelines re wrapping your code in [code] tags.

    What is the point of all this? The array containing the email addresses will not be stored in some way, but will simply be cast to the electronic winds and disappear for ever when the page is closed.

    There seems to be no point in trying to identify the exact reason for the email address being invalid. Remember that the user can enter a syntactically "valid" address which is simply wrong - [email protected].

    It is not possible to highlight individual characters in a textbox.


    Code:
    function checkEmail(){ 
var em = document.signupform.email.value;
if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i.test(em))) {  
alert ("Invalid email address. Please re-enter");
document.signupform.email.value = "";   // clear the entry;
document.signupform.email.focus(); // and focus on the box 
return false;  
}
return true;  // the default, so not required
}
    There is in point in checking that the email address has fewer than 5 characters - that would fail the test above.




    He thought he saw a Rattlesnake
    That questioned him in Greek:
    He looked again, and found it was
    The Middle of Next Week.
    "The one thing I regret," he said,
    "Is that it cannot speak!"
    - Lewis Carroll
    Last edited by Philip M; Apr 1, 2009, 04:24 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

    Comment

    • #3
      I'm sorry I probaly explained what I wanted wrong. When I enter an email in the text box and click "check" I want it to do checks before it is added, I wanted it to be more specific instead of saying "Error", for an example if it is not at least 8 characters instead of 5, in green text it could read "must be 8 or more characters", and if it has any characters other than numeral or alphabetical and @ and "." then it should say "only include numbers and letters", also if they forget the "@" I'd want it to read that the email must have an "." or "@" in it. Lastly if im searching for an email address and I enter "c" I'd prefer not to have it pop up until I hit the "Find Button" which is nonexistant right now. When I do click a "Find" button I'd want it to display in that same green text all the results. I eventually am going to turn this into something more useful but this is what I need now. Any help please?

      Comment

      • #4
        You do not seem to have read the reply I gave you. The array containing the email addresses will not be stored in some way, but will simply be cast to the electronic winds and disappear for ever when the page is closed.

        Why must the address be 8 or more characters? And why do you allow only numbers and letters? The local part of the address (before @) allows the following characters:

        ABCDEFGHIJKLMNOPQRSTUVWXYZ
        abcdefghijklmnopqrstuvwxyz
        0123456789
        .!#$%&"*+-/=?^_`{|}~

        While the domain part (after @) only allows the following characters :

        ABCDEFGHIJKLMNOPQRSTUVWXYZ
        abcdefghijklmnopqrstuvwxyz
        0123456789
        .-

        Note that domain names are never case-sensitive, but the local-part might be (allowed, but optional).

        And why green? Error messages are normally displayed in red. Are you Chinese or something?

        If you insist on this sort of detailed checking, then you ought to be able to adapt/extend the code I gave you yourself. For example:-

        if (/@/.test(em)) { // em includes an @ sign so do nothing
        }
        else {
        alert ("An email address must contain an @ symbol");
        return false;
        }


        But as I say, it is all really a waste of time as the most likely error is that the user simply mis-spells his address. [email protected].
        Last edited by Philip M; Apr 2, 2009, 04:02 AM. Reason: Typo

        All the code given in this post has been tested and is intended to address the question asked.
        Unless stated otherwise it is not just a demonstration.

        Comment

        • #5
          I did read that it doesn't save and I already know this but still want what I specified if possible

          Comment

          • #6
            okay can you at least tell me how to add another button called "Find" instead of having the "check button" do everything. The check button will have added the emails and the "Find" will allow me to search for them and then display the results in green non chineese text (red is for errors your right), where would I place it in my code? I want the search results in green text instead of in the little list that pops up.

            Comment

            • #7
              anyone?

              Comment

              Previous template Next
              Working...
              X