JavaScript problems in html

Question

HTML code:

<html>

<head>
    <title>Registration</title>
    <script src="val_registration.js" type="text/javascript"></script>
</head>

<body>
        <form action="" method="post" id="myform">
        <table>
        <tr>
        <td><label for="Last_name">Last name:<span id="imp">*</span></label></td><td><input type="text" id="Last_name" tabindex="5"/>
        <br/><span class="eg">&nbsp;eg:Le You</span></td></td>
        </tr>

        <tr>
        <td><label for="E_mail">E-mail:<span id="imp">*</span></label></td>
        <td><input type="text" id="E_mail" tabindex="10"/>
        <br/><span class="eg">&nbsp;eg:[email protected]</span></td></td>
        </tr>

        <tr>
        <td colspan="4"><input type="submit" value="Confirm" id="confirm2" tabindex="11" onclick="val_registration ()"/>
        <input type="reset" value="Cancel" id="cancel2" tabindex="12"/></td>
        </tr>
        </table> 
        </form>
</body>
</html>

JavaScript code:

    function val_registration () {

    var err = "";    
    var val_Last_name = document.getElementById("Last_name").value;
    var string_Last_name = /^[a-zA-Z@'-_().,]{1,}$/;

    if (val_Last_name == null || val_Last_name == "" || !string_Last_name.test(val_Last_name))    

    {
        err += "\u2022Lastname cannot be blank/Lastname can contain\n alphabets or special symbols(@ ' - _ ( ).,) only.\n";
    }   


    var val_E_mail = document.getElementById("E_mail").value;
    var atpos = val_E_mail.indexOf("@");
    var dotpos = val_E_mail.lastIndexOf(".");

    if (atpos<1 || dotpos<atpos+2 || dotpos+2> = val_E_mail.length)

    {
        err += "\u2022E-mail cannot be blank/E-mail format must follow\n the example provided.\n";
    }

    alert(err);}

Based on the following codes, I would like to ask 3 questions:

First, why didn't the alert pop up??Is there anything wrong with my e-mail validation??

Second, why erroneous data such as <, >, /, * and etc can be entered into the last name field although I have this regular expression (/^[a-zA-Z@'-_().,]{1,}$/)? I just want the users to enter alphabetic data and the special symbols given in the regular expression above.Furthermore, I also found that the combination of both numeric and alphabetic data can be entered to this field also. Why did it happen?

Third, can I remove the border of input field? If this can be done, then how to do it?

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

why didn't the alert pop up??Is there anything wrong with my e-mail validation??

You had > =, when it should be >=. And use === for comparing with null.

why erroneous data such as <, >, /, * and etc can be entered

Because part of your regex is '-_. The - in a character class in the form x-y means allow all characters in the range from x to y, and < falls in the range of ' and _.

Solution? Use

 `/^[a-zA-Z@'\-_()\.,]{1,}$/`.
         ^-- escaped it

can I remove the border of input field? If this can be done, then how to do it?

Use:

input[type='text']{ /* only textboxes */
    border:none;   /*No border nor outline*/
    outline:none;  
    -webkit-user-select:none;  /*Disable user-select - the blue border when user clicks 
    TODO:add vendor prefixes for user-select*/
}

FULLY FIXED CODE

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 28, 2014 at 7:21

Gaurang Tandon

6,89911 gold badges52 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kippie · Accepted Answer · 2014-03-28 06:58:38Z

1

1 You have a syntax error in your code: if (atpos<1 || dotpos<atpos+2 || dotpos+2> = val_E_mail.length)

should become

if (atpos<1 || dotpos<atpos+2 || dotpos+2 >= val_E_mail.length)

(notice the >=)

2 take a closer look at your regex and notice this part: '-_ It actually sees this as a range. Escape your - character: \-, or place it at the very end of your character range.

3 input { border:none; }

This should answer all of your questions. However, next time do try to separate these into different questions on SO, as this would normally be closed for not being specific enough.

answered Mar 28, 2014 at 6:58

Kippie

3,8304 gold badges26 silver badges38 bronze badges

Comments

rav · Accepted Answer · 2014-03-28 07:00:16Z

1

1. to check for blank inputs

instead of writing

val_Last_name == null || val_Last_name == ""

it is better to use, so that you can eliminate blank spaces in your use case

val_Last_name.trim()

you don't need to check for null values since you are the one specifying the DOM's ID.

2. as for the email validation you can use this

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

br

3. to remove border, you can do this via css

input
{
border: 0px;
}

additional tip: use jQuery (write less, do more)
your document.getElementById("element") becomes $('#element')

answered Mar 28, 2014 at 7:00

rav

7536 silver badges14 bronze badges

1 Comment

user3310635 Over a year ago

I haven't learnt them yet so I don't know how to use the functions and also the regular expression.But anyways,I appreciate your answers:)

Prabhakar Manthena · Accepted Answer · 2014-03-28 07:46:35Z

1

change the below line

if (atpos<1 || dotpos<atpos+2 || dotpos+2> = val_E_mail.length)

to

if (atpos<1 || dotpos< (atpos+2) || (dotpos+2) >= val_E_mail.length)

you need to add double quotes.

edited Mar 28, 2014 at 7:46

answered Mar 28, 2014 at 6:52

Prabhakar Manthena

2,3234 gold badges18 silver badges31 bronze badges

3 Comments

user3310635 Over a year ago

After I add double quotes, the erroneous data still can pass.

Gaurang Tandon Over a year ago

@PrabhakarManthena If you add quotes, then .test won't work. TypeError. Second, the real problem doesn't pertain to quotes, but with the -.

Gaurang Tandon Over a year ago

@user3310635 Check this answer.

Collectives™ on Stack Overflow

JavaScript problems in html

4 Answers 4

FULLY FIXED CODE

Comments

Comments

1. to check for blank inputs

2. as for the email validation you can use this

3. to remove border, you can do this via css

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1. to check for blank inputs

2. as for the email validation you can use this

3. to remove border, you can do this via css

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related