1

I'm having a problem with my code. There's no error in Chrome's console but it doesn't work. I wanted to count the password characters entered. The condition is that the password must be a minimum of 6 characters.

$(document).ready(function() {
  $(".submit").click(function() {
    if($('#regform input[type="password"]').val().length > 6) {
      $('.error').html('Must have a min of 6 chars');
      $('.error').css("display","block");
    }
  }
});

Can anyone explain it for me?

Jonathan Lam
  • 16,831
  • 17
  • 68
  • 94
Kobe Bryan
  • 317
  • 1
  • 3
  • 16

2 Answers2

4

The problem is that there is nothing to stop the form, even if an error has occurred. You need to add a return false or event.preventDefault() to actually stop the form from being sent. You don't get an error because the form immediately continues to the action page before you see any error message pop up.

Secondly, your condition throws an error if the password length is greater than six. This should be reversed.

Change your code to the following:

$(document).ready(function() {
    $(".submit").click(function(event) {

        // SWITCH THE COMPARISON OPERATOR
        if($('#regform input[type="password"]').val().length < 6) {
            $('.error').html('Must have a min of 6 chars');
            $('.error').css("display","block");

            // ADD THIS LINE
            event.preventDefault();

            // OR THIS LINE
            return false;

        }
    })
});

For more info:

Community
  • 1
  • 1
Jonathan Lam
  • 16,831
  • 17
  • 68
  • 94
  • How do you know there's even a form, `.submit` could be anything in this context ? – adeneo Aug 09 '16 at 02:37
  • @adeneo I already asked for HTML in a comment on the question; because there was no reply, I inferred that it was a form (most likely and conventional scenario) – Jonathan Lam Aug 09 '16 at 02:38
  • I'm guessing your guess is correct, even if it is a stretch, but there could be a number of reasons it doesn't work, maybe the OP has no `.submit` element at all? – adeneo Aug 09 '16 at 02:43
1

Maybe this is what you're looking for:

HTML

<input type="text" id="password" />
<input type="button" class="btnSubmit" value="Submit" />
<p class="error"></p>

jQuery

$('.btnSubmit').click(function(){
  if($("#password").val().length < 6){
    $('.error').html('Must have a min of 6 chars');
  }else{
    $('.error').html('Good to go.');
  }
});

JSFiddle: https://jsfiddle.net/Ltnrwt0t/

Brian Moreno
  • 977
  • 4
  • 11
  • 39
  • While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Jonathan Lam Aug 09 '16 at 02:46
  • Thanks, i'll keep that in mind when writting my next answer. Since their isn't that much code I figured it wasn't that hard to deduce what was going on and what his mistake was. – Brian Moreno Aug 09 '16 at 02:49
  • @ExoSkeleton321 Thank you so much for your answer!!! it was correct but I need to not to make an id for it coz we have a code for changing the value. I guess i need to get that code where the _value="submit"_ – Kobe Bryan Aug 09 '16 at 02:57
  • You're welcome, you can always change the id to a class of the id changes. But I'm glad I was able to help a little bit. – Brian Moreno Aug 09 '16 at 03:00