Login validate textbox/input with Javascript/Jquery and correct/wrong images

Question

I want to make a login with javascript/jquery for validation and then when i click on button then it checks for these values in database, but i only ask for help with javascript/jquery.

I would like to do so when you start typing in textboxes/input "username" or "password" then one of these images: "wrong" "correct"

image "wrong" should be shown when you enter the textbox. and you have to write at least 6 characters in username and password, so i should be shown untill you have written more than 6 characters.

image "correct" should be shown when you have written more than 6 characters and in username only 0-9 Aa

Code:

 <table>
        <tr>
            <td>
                <asp:Label ID="LabelUsername" runat="server" Text="Username:"></asp:Label>
            </td>
            <td>
                <input type="text" id="TextBoxUsername" runat="server" placeholder="Username" oncopy="return false" onpaste="return false" oncut="return false" class="Text" />
            </td>
            <td>
                <img src="images/Forkert.png" id="wronguser" style="width:45%;height:40%;visibility:hidden"/>

            </td>
            <td>
                <img src="images/Rigtigt.png" id="correctuser" style="width:45%;height:40%;visibility:hidden" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="LabelPassword" runat="server" Text="Password:"></asp:Label>
            </td>
            <td>
                <input type="text" id="TextBoxPassword" runat="server" placeholder="Password" oncopy="return false" onpaste="return false" oncut="return false" class="Text" />
            </td>
            <td>
                <img src="images/Forkert.png" id="wrongpass" style="width:45%;height:40%;visibility:hidden"/>

            </td>
            <td>
                <img src="images/Rigtigt.png" id="correctpass" style="width:45%;height:40%;visibility:hidden" />

            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input id="ButtonLogin" runat="server" type="submit" value="Login" name="Login-button" />

                <input id="ButtonCancel" runat="server" type="submit" value="Cancel" name="Cancel-button" class="cancel" />

            </td>
        </tr>
    </table>

EDIT:

I know it register/signup, but the point is there, that this box popping up if the requirements isn't made. [https://signup.leagueoflegends.com/en/signup/index][1]

You could try this `http://mrbool.com/how-to-validate-password-strength-using-jquery/26760` which does every complex validation that is required for a field or you could create one of your own if simple validation is what is required, by adding a label next to each field and update the text in it based on the corresponding field`s change event (which is on the left). — dreamweiver, Feb 13 '14 at 09:54
Well, I dont know much about javascript/jquery, but I dont understand what you want to do with password strength, when I want an image. I mean that i want so you need to write more than 6 characters if you haven't written more than 6, then you shouldn't could continue, and then the image "wrong" should be visible. — Zeuthenjr, Feb 13 '14 at 10:01

score 0 · Answer 1 · answered Feb 13 '14 at 10:00

0

I hope you're not building a public web site with that because jquery will need to talk to a web service which will be given a lot of wrong combinations to check and never suspect anything. Basically this will be a "welcome brute force" entry point.

answered Feb 13 '14 at 10:00

durilka

1,399
1
10
22

I just want to make a login form, which is working, so i just can copy it for my next sites or for help if some of my friends want a login form. What would you suggest then? – Zeuthenjr Feb 13 '14 at 10:07
Given that you're talking about ASP, use the standard tools for that: http://msdn.microsoft.com/en-us/library/wce3kxhd.ASPX – durilka Feb 13 '14 at 10:16
I dont talk about ASP, i say im asking for help about Javascript/Jquery, as 99% of the pages i visit got javascript (correct/wrong validation) – Zeuthenjr Feb 13 '14 at 10:22
a) You marked your question as "asp.net" b) I'm saying "be very careful with client-side authentication" c) I'm talking about "use server side validation on submit". – durilka Feb 13 '14 at 10:43
Or you want to show "correct" image without checking if the username/password are correct? I.e. simple validation if the entered password is at lest 6 characters long? – durilka Feb 13 '14 at 10:48
Go to this: http://jsfiddle.net/yLPqn/ It might help a bit, im pretty bad explainer – Zeuthenjr Feb 13 '14 at 11:22
Well because i use ASP:LABEL, then i tag it as ASP.NET so i dont get PHP ? its just what i thought about doing it.. i dont know if its wrong.. – Zeuthenjr Feb 13 '14 at 11:23

Michael P · Answer 2 · 2014-02-13T10:44:08.533

0

"Inputvalidation" is what you are looking for. It seems, that you do not want to use javascript (I assume that...), so the good news is, there is a HTML5 feature for it. Use:

<input type="text" pattern="^\w{10}$">

where pattern="^\w{10}$" searches for a regular expression (in this ex. a word with 6 letters). Custumize it for your needs (explanation).

You can now style the <input> with the css : input:valid and input:invalid.

input:valid {
  background-image : url(img/right.png);
}
input:invalid {
  background-image: url(img/wrong.png);
}

You found an overview here.

EDIT: Oh, I've misread your question. Nevertheless, I found this a better soloution than a javascript/jquery script !

edited Feb 13 '14 at 10:44

answered Feb 13 '14 at 10:12

Michael P

603
1
5
22

Well, i only use table to get a better looking login, as I hate to style a lot to let it sit like i want to it, and i want it to sit like table do it. Well, i assume that i need javascript/jquery for showing the "wrong" image if the textboxes/inputs has less than 6 characters. and "correct" image for more than 6 characters. – Zeuthenjr Feb 13 '14 at 10:23
I've edited the RegEx, now the input must have at least 6 letters to be valid. As I mentioned: Use the css for the images. Look at the edited Post. – Michael P Feb 13 '14 at 10:36
I put on pattern on the inputs, and i have styled the input with that valid and invalid, but it wasn't that i expected.. it just made an error.. – Zeuthenjr Feb 13 '14 at 11:07
Try to go to this: http://jsfiddle.net/yLPqn/ Maybe it helps more about my problem.. – Zeuthenjr Feb 13 '14 at 11:19
What does "i just made an error" mean ? Guess I don't understand your question anyway....the fiddle does nothing. – Michael P Feb 13 '14 at 11:43
Well, it was meant you should look at it, not try it, if you look at the javascript code, you will maybe see what i mean about those images and such – Zeuthenjr Feb 13 '14 at 11:58

score 0 · Answer 3 · answered Feb 13 '14 at 10:42

i have created a prototype of what you wanted, may be it would help you understand the overall flow

HTML CODE:

Username:<input id="uid" type="text" name="Uname" size="15" /><label id="ulbl"></label>
</br></br></br>
Password:<input id="pid" type="text" name="Uname" size="15" /><label id="plbl"></label>

CSS:

.correct {
    color:green;
 }
.wrong {
    color:red;
 }

JS CODE:

var exp = /^[a-zA-Z]*$/;
$('#uid').on("keyup", function () {
   if ($(this).val().length > 9 && exp.test($(this).val())) {
      $('#ulbl').html('<B>CORRECT<B>');
      $('#ulbl').removeClass('wrong');
      $('#ulbl').addClass('correct');
   } else if ($(this).val().length === 0) {
      $('#ulbl').html('');
      $('#ulbl').removeClass('wrong');
   } else {
      $('#ulbl').html('<B>WRONG<B>');
      $('#ulbl').removeClass('correct');
      $('#ulbl').addClass('wrong');
   }

});

$('#pid').on("keyup", function () {
   if ($(this).val().length > 6) {
       $('#plbl').html('<B>CORRECT<B>');
       $('#plbl').removeClass('wrong');
       $('#plbl').addClass('correct');
   } else if ($(this).val().length === 0) {
       $('#plbl').html('');
       $('#plbl').removeClass('wrong');
   } else {
       $('#plbl').html('<B>WRONG<B>');
       $('#plbl').removeClass('correct');
       $('#plbl').addClass('wrong');
   }
 });

JS FIDDLE:http://jsfiddle.net/dreamweiver/ewdk7/7/

Happy Coding :)

Dimt · Answer 4 · 2014-02-13T11:34:15.887

This is a jQuery event which test for umber of characters on every keystroke or on paste.

$('#TextBoxPassword').on('change keyup paste', function(e){

        var reg = /^[A-Za-z0-9 ]{6,}$/;
        var $target = $(e.target);

    if(reg.test($target.val()) == false){
        $('#wrongpass').css('visibility', 'visible');
         $('#correctpass').css('visibility', 'hidden');        
    }
    else if(reg.test($target.val()) == true){
        $('#wrongpass').css('visibility', 'hidden');
         $('#correctpass').css('visibility', 'visible');        
    }

});

Look at the fiddle http://jsfiddle.net/dimt/6Rzd9/

Login validate textbox/input with Javascript/Jquery and correct/wrong images

Code:

4 Answers4