unable to do custom validation using javascript

Question

I am studying custom validation of forms. My HTML code is here:

<!DOCTYPE html>
    <html>
        <head>
            <title>q
                JavaScript 

            </title>
            <link rel="stylesheet" src="validate.css">
        </head>

        <body>
            <article>
                <form id="register" action = "register" method = "post">
                    <fieldset>
                        <legend> Register </legend>
                        <!--For email -->
                        <label for = "email"> Email: </label>
                        <input type= "email" id = "email" name="email" autofocus required />
                        <br>
                                <!--For password1 -->
                        <label for = "pass1" > Password: </label>
                        <input type = "password" id = "pass1" name = "pass1" autofocus required/>
                        <span id = "strength">  </span>
                        <br>
                        <!--For password2 -->
                        <label for = "pass2" > Repeat: </label>
                        <input type = "password" id = "pass2" name = "pass2" autofocus required/>
                        <br>

                        <input type="submit" value="Submit"/>
                    </fieldset>
                </form>
            </article>
            <script type="text/javascript" src="validate.js"></script>
        </body>
    </html>

The css is here :

label
{
    clear: both;
    float: left;
    width: 40%;
    text-align: right;
    margin: 0 2% 10px 0;
    color: #666;
    vertical-align:middle;    
}
input {
    margin: 0 2% 10px 0;
}

The javascript is here:

//dom objects
var form =
{
    register: document.getElementById("register"),
    email: document.getElementById("email"),
    pass1: document.getElementById("pass1"),
    pass2: document.getElementById("pass2"),
    strength: document.getElementById("strength")
}



form.register.addEventListener("submit",CheckForm);
form.pass1.addEventListener("keypress",NoSpaces);
form.pass2.addEventListener("keypress",NoSpaces);
form.strength.addEventListener("keypress",PwdStrength);

//to give password nature

var strtxt= ["weak" , "average","strong"];
var strclr= ["red", "yellow", "green"];

function PwdStrength(e)
{
    var pass = form.pass1.value;

    //count upper case
    var uc = pass.match(/[A-Z]/g);

    //count digit

    var nm = pass.match(/\d/g);

    //count other characters

    var nw = pass.match(/\W/g);

    var s=pass.length + uc + 2*nm + 3*nw ;

    s = Math.min(Math.floor(s/10),2);

    form.strength.textContent = strtxt[s];

    form.strength.style.color = strcolor[s];

}




function NoSpaces(e)
{
    if(e.charCode == 32 )
    {
        e.preventDefault();
    }
}
var reEmail =  /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;


function CheckForm(e)
{
    var msg="";

    if ( !reEmail.test(form.email.value))
    {
        msg+="Email address ";
    }

    if ( form.pass1.value == "" || form.pass1.value != form.pass2.value )
    {
        msg+= "Password ";
    }

    if ( msg != "")
    {
        msg= "check Your:"+msg;
    }
    else
    {
        msg +="successful submission";
    }
    alert(msg);
    e.preventDefault();
}

You can see it here: http://jsfiddle.net/EjqhL/

Please help me to fix:

I want to match password, which I am not getting.
Also customing validation.

I have edited...and updated javascript jsfiddle.net/EjqhL/1

jahan
– jahan

2014-04-28 21:59:38 +00:00
Commented Apr 28, 2014 at 21:59 — jahan
– jahan, Commented Apr 28, 2014 at 21:59

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

1

Your method PwdStrength is bound to the keypress on a span you don't type into:

form.strength.addEventListener("keypress",PwdStrength);

I'm assuming span with id strength is intended to show the password strength word and color. If so, you might be better of to use the pass1 field, similar to:

form.pass1.addEventListener("keypress",PwdStrength);

Also your colors are stored in an array named strclr but you are referencing it as strcolor later on, like this:

form.strength.style.color = strcolor[s]; // that array name is wrong...

Next your regular expression checks don't return numbers, they return the matches:

var uc = pass.match(/[A-Z]/g);
var nm = pass.match(/\d/g);
var nw = pass.match(/\W/g);

The above returns this when typing in 123 into pass1:

uc = null
nm = ["1", "2", "3"]
nw = null

So, using your maths on it like the below won't work with nulls and arrays:

var s = pass.length + uc + 2*nm + 3*nw ; // won't work

Change your match to test which will return true false instead, similar to this:

var uc = /[A-Z]/g.test(pass);
var nm = /\d/g.test(pass);
var nw = /\W/g.test(pass);

OR - You can use 1 and 0 values like this:

var uc = pass.match(/[A-Z]/g) ? 1 : 0;
var nm = pass.match(/\d/g) ? 1 : 0;
var nw = pass.match(/\W/g) ? 1 : 0;

The above version will return 1 if a match was found otherwise 0;

Now the maths will work and you see the label and color change in the span as you type into pass1.

DEMO - Applying the above mentioned fixes

Complete JavaScript from fiddle for completeness

//dom objects

var form =
{
    register: document.getElementById("register"),
    email: document.getElementById("email"),
    pass1: document.getElementById("pass1"),
    pass2: document.getElementById("pass2"),
    strength: document.getElementById("strength")
}



form.register.addEventListener("submit",CheckForm);
form.pass1.addEventListener("keypress",NoSpaces);
form.pass2.addEventListener("keypress",NoSpaces);
form.pass1.addEventListener("keypress",PwdStrength);

var strtxt= ["weak" , "average","strong"];
var strclr= ["red", "yellow", "green"];

function PwdStrength(e)
{
    var pass = form.pass1.value;

    //count upper case
    var uc = /[A-Z]/g.test(pass);
    var nm = /\d/g.test(pass);
    var nw = /\W/g.test(pass);

    var s = pass.length + uc + 2*nm + 3*nw ;
    
    s = Math.min(Math.floor(s/10),2);
    
    form.strength.textContent = strtxt[s];
    form.strength.style.color = strclr[s];
}




function NoSpaces(e)
{
    if(e.charCode == 32 )
    {
        e.preventDefault();
    }
}
var reEmail =  /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;


function CheckForm(e)
{
    var msg="";

    if ( !reEmail.test(form.email.value))
    {
        msg+="Email address ";
    }

    if ( form.pass1.value == "" || form.pass1.value != form.pass2.value )
    {
        msg+= "Password ";
    }

    if ( msg != "")
    {
        msg= "check Your:"+msg;
    }
    else
    {
        msg +="successful submission";
    }
    alert(msg);
    e.preventDefault();
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 28, 2014 at 22:03

Nope

22.4k8 gold badges50 silver badges73 bronze badges

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

5 Comments

jahan Over a year ago

Yes I have edited...But I have to give password strength type e.g. week , average or strong..and also color attached to it...I know it as custom validation..

Nope Over a year ago

@jahan: I see. I have edited my answer based on your latest fiddle.

Nope Over a year ago

@jahan: The whole code is in the fiddle but I add it to the answer too for completeness.

Nope Over a year ago

@jahan: Sorry if the validation of the password is not as expected. I could only fix your code using the existing code, so the words and colors are applied for the password check. If the existing password checks are not checking what you intended you might need to isolate that code individually into a new fiddle and ask in a new question how you can change the existing code/validation in PwdStrength to what you want it to validate, stating the exact desired result for each check.

jahan Over a year ago

it's all right. I was very much confused with the problem ..Thank a lot for helping me...

joelataylor · Accepted Answer · 2014-04-28 22:40:37Z

0

You're listening to a key event on the wrong element. The 'strength' element doesn't take any key inputs. So you want to change:

form.strength.addEventListener("keypress",PwdStrength);

to:

form.pass1.addEventListener("keyup",PwdStrength);

Notice, I changed the event to the keyup event so it runs AFTER the key has been pressed. Another note ...

var uc = pass.match(/[A-Z]/g);

This will return an array of each found instance. So you might watch to check if 'uc' is null or an array.length.

edited Apr 28, 2014 at 22:40

answered Apr 28, 2014 at 22:29

joelataylor

3031 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

unable to do custom validation using javascript

2 Answers 2

Complete JavaScript from fiddle for completeness

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Complete JavaScript from fiddle for completeness

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related