Following form submits even though values of 'set password' and 'confirm password' are not equal.

Question

0.00/5 (No votes)

See more:

My HTML code is:

XML

<form id="register" method="post" action="finish.html">

        Set Password * :

        <input type="password" id="setpassword" required="required">

        Confirm Password * :

        <input type="password" id="confirm" required="required" onkeyup="checkPass();" /><span id="message2" class="message2"></span>

    <input type="submit" id="submit">

    </form>

and I have tried using javascript that is :

C#

function checkPass()
    {

        var pass1 = document.getElementById('setpassword');
        var pass2 = document.getElementById('confirm');

        var message = document.getElementById('message2');

       var goodColor = "#0C6";
        var badColor = "#FF9B37";

        if(pass1.value == pass2.value){


            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "Matching!"
            return true;

        }else {

            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = "Doesn't Matching!"
            return false;
        }


    }

Still if I enter different values for `set password` and `confirm password`, form submits without any warning.

The form must not submit until the values of both are not same. Please help.

I am new to here.Thanks in advance.

Posted 18-Mar-14 1:04am

Krupal5

Add a Solution

Comments

Kornfeld Eliyahu Peter 18-Mar-14 7:08am

You have no code that stops submitting the form!!! So why it should not.
As the only code you executing is the confirm password check you may add some enable/disable code for the submit button...

Krupal5 18-Mar-14 7:14am

will 'return true' and 'return false' not work?

Kornfeld Eliyahu Peter 18-Mar-14 7:16am

No. The code you have does not execute when you hit the submit button - it simply not attached to it but to the conform text box...
As I wrote the fastest way is to enable/disable the submit button from within the checkPass function...

Krupal5 18-Mar-14 7:20am

Can you provide better explanation in answer?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Accepted Answer · 2014-03-18T01:26:00

The problem is that the only code you have (checkPass) does not execute when hitting submit button...
One of the options you have is add some code to checkPass that will enable disable the submit button.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
</head>
<body>
    <form id="register" method="post" action="finish.html">
    Set Password * :
    <input type="password" id="setpassword" required="required">
    Confirm Password * :
    <input type="password" id="confirm" required="required" onkeyup="checkPass();" /><span
        id="message2" class="message2"></span>
    <input type="submit" id="submit" disabled="disabled">
    </form>

    <script type="text/ecmascript">
        function checkPass() {
            var pass1 = document.getElementById('setpassword');
            var pass2 = document.getElementById('confirm');
            var btn = document.getElementById('submit');

            var message = document.getElementById('message2');

            var goodColor = "#0C6";
            var badColor = "#FF9B37";

            if (pass1.value == pass2.value) {
                pass2.style.backgroundColor = goodColor;
                message.style.color = goodColor;
                message.innerHTML = "Matching!"

                btn.disabled = false;

                return true;
            } else {
                pass2.style.backgroundColor = badColor;
                message.style.color = badColor;
                message.innerHTML = "Doesn't Matching!"

                btn.disabled = true;

                return false;
            }
        }
    </script>
</body>
</html>

Peter Leow · Accepted Answer · 2014-03-18T01:24:00

Solution 1

You have to call the checkPass function on clicking the submit button:

<form id="register" method="post" action="finish.html"  onsubmit="return checkPass()"  >

I also noticed the value for action attribute is wrong, it cannot be an html file, it has to be a server-side script file like php.

Posted 18-Mar-14 1:24am

Peter Leow

Updated 18-Mar-14 1:28am

v2

Comments

Krupal5 18-Mar-14 7:42am

I am only designing using HTML and javascript for my school project and know very vey little about PHP.Can you please tell me what will be the role of php file in action attribute? Will it store user inputs in database?

Peter Leow 18-Mar-14 7:59am

PHP is a server-side scripting language that processes form data submitted from your html page (client-side), it also connects to and manipulates databases. The action attribute specifies the php file that the form data should be submitted to. How the data is being treated depends on the php code, part of it may involve database operation. Read more: PHP

Krupal5 18-Mar-14 8:04am

Can you suggest a good book for php?

Peter Leow 18-Mar-14 8:23am

I do not learn from books, the Internet is your best teacher, I recommend this site:
w3School Online Web Tutorials
Enjoy learning.

Krupal5 18-Mar-14 8:25am

I know this one...but I don't think it teaches practically.

Krupal5 18-Mar-14 8:36am

you are instructor in technical institution. Have you any kind of notes or your website that may help me learning php?

Kornfeld Eliyahu Peter 18-Mar-14 8:03am

"...it cannot be an html file, it has to be a server-side script file..." - That's not true, you can write web site in pure html, with it's restrictions...