If a validation script fails, how do I place focus back into the field until entered correctly

Discussion in 'Javascript' started by Richard Pulliam, May 14, 2017.

  1. Richard Pulliam

    Richard Pulliam

    Joined:
    May 14, 2017
    Messages:
    2
    Likes Received:
    0
    Location:
    Panama City Beach, Florida
    I want to make sure the user enters the correct information before moving on to another field. Here is an example:

    <script type='text/javascript'>
    function emailValidator(element, alertMsg){
    var emailvalid = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(element.value.match(emailvalid))
    {
    return true;
    }else{
    alert(alertMsg);
    return false;
    }
    }
    </script>

    The input in the form:

    <h3><font color="#FF0000">*</font> Your E-Mail address: <input
    type="text" size="30" name="email" value=" " id="email"
    onblur="return emailValidator(document.getElementById('email'), 'This is not a valid Email');"></h3>

    Like the codes is, it displays the error message but instead of going back to the email field, it goes on to the next
    field input box.

    Thanks for your help.
     
    Richard Pulliam, May 14, 2017
    #1
    1. Advertisements

  2. Richard Pulliam

    Richard Pulliam

    Joined:
    May 14, 2017
    Messages:
    2
    Likes Received:
    0
    Location:
    Panama City Beach, Florida
    Figured it out:

    <script type="text/javascript">
    function emailValidator(element, alertMsg){
    var emailvalid = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(element.value.match(emailvalid))
    {
    element.style.background = 'White';
    return true;
    }else{
    element.style.background = 'Yellow';
    alert(alertMsg);
    myHidden.focus(); // place focus on dummy input because it has to go somewhere besides real one first
    element.focus(); // place focus on real one
    return false;
    }
    }
    </script>

    The input in the form:

    <input type="hidden" id="myHidden" value=""/>

    <h3><font color="#FF0000">*</font> Your E-Mail address: <input
    type="text" size="30" name="email" value=" " id="email"
    onblur="emailValidator(document.getElementById('email'), 'This is not a valid Email');"></h3>
     
    Last edited: May 15, 2017
    Richard Pulliam, May 15, 2017
    #2
    1. Advertisements

  3. Richard Pulliam

    John Joe

    Joined:
    Apr 25, 2017
    Messages:
    34
    Likes Received:
    7
    Location:
    Malaysia
    Please wrap your code using code tag :)
     
    John Joe, May 19, 2017
    #3
    1. Advertisements

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.
Similar Threads
  1. TN Bella
    Replies:
    1
    Views:
    1,831
    TN Bella
    Jul 1, 2004
  2. Moh

    I need a VHDL code

    Moh, Jun 8, 2016, in forum: VHDL
    Replies:
    0
    Views:
    648
  3. alxcam8
    Replies:
    0
    Views:
    655
    alxcam8
    Jun 29, 2016
  4. Anwesa Roy
    Replies:
    0
    Views:
    658
    Anwesa Roy
    Aug 22, 2016
  5. Ankit Tayal
    Replies:
    0
    Views:
    980
    Ankit Tayal
    Oct 1, 2016
  6. Amy21
    Replies:
    0
    Views:
    439
    Amy21
    Jan 20, 2017
  7. noor moqady
    Replies:
    0
    Views:
    143
    noor moqady
    Apr 12, 2017
  8. ameni
    Replies:
    0
    Views:
    104
    ameni
    May 6, 2017
Loading...