Can't get jquery form input validation working

Question

noob question...

Had the same kind of question yesterday. Managed to get it working without an answer. Today, same script, different divs -not working.

Html of it

<div class="imgform">
<form>
Login:
<input type="text" id="imglogin" name="login">
Password:
<input type="password" id="imgpass" name="pass">

<a class="imglogin" href="#">Login</a>
</form>
</div>

And the script it self

$(".imglogin").click(function(){

    var password = "111";
    if($("#imgpass").val() !== password) {
        $("#imgform").text("Incorrect password");
    } else {
        window.location.href = "http://google.com";

} });

Went over the script a few times. Can't figure out where is my mistake

What happens? What error do you get? Have you debugged with the console? — j08691
– j08691, Commented Apr 9, 2014 at 16:52

Jay Blanchard · Accepted Answer · 2014-04-09 17:37:47Z

1

You must load jquery in <head> block

<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript">

HTML (added a div with id of imgform to display any answers)

<div class="imgform">
    <form>Login:
        <input type="text" id="imglogin" name="login">Password:
        <input type="password" id="imgpass" name="pass">
<a class="imglogin" href="#">Login</a>
            <div id="imgform"></div>
    </form>
</div>

Try this

$(window).load(function(){
$(".imglogin").click(function () {
console.log('working')
    var password = "111";
    if ($("#imgpass").val() != password) {
        $("#imgform").text("Incorrect password"); //I added div with id imgform
    } else {
        window.location.href = "http://google.com";
    }
});
});

DEMO

edited Apr 9, 2014 at 17:37

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

answered Apr 9, 2014 at 16:56

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

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

5 Comments

Jay Blanchard Over a year ago

Change #imgform to .imgform.

Sridhar R Over a year ago

@JayBlanchard see demo fiddle html i added new div

Jay Blanchard Over a year ago

that wasn't apparent here. Add those changes so that the code is preserved with your answer.

Sridhar R Over a year ago

@JayBlanchard thats a perfect way to show error text thats why OP accept this as answer

Jay Blanchard Over a year ago

I know that it is, but the code may be lost if something goes wrong with jsfiddle. Please add the changes here so that SO can preserve the code for future readers.

Jaykumar Patel · Accepted Answer · 2014-04-09 16:56:22Z

1

You should use .imgform instead of #imgform when password wrong and another one is missing curly brace }

Check this `Demo jsFiddle`

jQuery

$(".imglogin").click(function(){

    var password = "111";
    if($("#imgpass").val() != password) {
        $(".imgform").text("Incorrect password");
    } else {
        window.location.href = "http://google.com";   
    }
});

HTML

<div class="imgform">
<form>
Login:
    <input type="text" id="imglogin" name="login" />
Password:
    <input type="password" id="imgpass" name="pass" />

<a class="imglogin" href="#">Login</a>
</form>
</div>

answered Apr 9, 2014 at 16:56

Jaykumar Patel

27.7k12 gold badges79 silver badges76 bronze badges

Comments

Jay Blanchard · Accepted Answer · 2014-04-09 17:31:33Z

0

You're missing a closing curly brace for your if statement -

$(".imglogin").click(function(){

    var password = "111";
    if($("#imgpass").val() !== password) {
        $(".imgform").text("Incorrect password"); // using a class instead of an id here
    } else {
        window.location.href = "http://google.com";   
    } // right here
});

edited Apr 9, 2014 at 17:31

answered Apr 9, 2014 at 16:53

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Collectives™ on Stack Overflow

Can't get jquery form input validation working

3 Answers 3

5 Comments

Check this `Demo jsFiddle`

jQuery

HTML

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Check this Demo jsFiddle

jQuery

HTML

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Check this `Demo jsFiddle`