CODEWITHSUNDEEP
javascripthtmlregex
user3310635
user3310635

Reputation: 53

JavaScript problems in html

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?

Upvotes: 0

Views: 74

Answers (4)

Prabhakar Manthena
Prabhakar Manthena

Reputation: 2303

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.

Upvotes: 1

Gaurang Tandon
Gaurang Tandon

Reputation: 6753

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

Upvotes: 2

rav
rav

Reputation: 753

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')

Upvotes: 1

Kippie
Kippie

Reputation: 3820

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.

Upvotes: 1

Related Questions