RegEx not working with my jQuery

Question

Can someone help me please, I want to show an error when the user makes an invalid input with jquery.
It works if the input is null, but does not work with RegEx.

Here is the html code :

<div class="error" style="padding:5px 10px;background-color:yellow;border:1px solid red;border-radius:5px;display:none"></div>


  <input type="text" name="nama">
  <input type="submit" name="submit" value="Cek">

And here the jQuery

  $(document).ready(function () {
        var justChar = /^[a-zA-Z]+$/;
        $('input[name="submit"]').click(function () {
            if ($('input[name="nama"]').val() === "") {

                $('.error').html('<ol></ol>');
                if ($('input[name="nama"]').val() === "") {
                    $('.error ol').append("<li>Name Must Be Require</li>");
                } else if (!justChar.test($('input[name="nama"]').val())) {
                    $('.error ol').append("<li>Name Must Be Character</li>");
                }

                $('.error').slideDown('slow');
                return false;
            }
            return true;

        });

    });

i've write in jsfiddle

if it is not empty then your inner condition check is not even made. see outer check - if ($('input[name="nama"]').val() === "") { — spiderman
– spiderman, Commented Jul 13, 2014 at 23:45

Valentin Mercier · Accepted Answer · 2014-07-13 23:50:52Z

2

Remove the parent condition if ($('input[name="nama"]').val() === "") as it is nonsense if you want to analyse your input value.

And for matching the regex, use the jQuery style method: $('input[name="nama"]').val().match(justChar);

answered Jul 13, 2014 at 23:50

Valentin Mercier

5,3564 gold badges28 silver badges51 bronze badges

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

9 Comments

Valentin Mercier Over a year ago

Thanks, wow I did not see that you were first to answer. I gave you a +1 for that

spiderman Over a year ago

Thank you, and thanks for suggesting the value-add :)

BogelDR Over a year ago

the both you mean is like this? $('input[name="submit"]').click(function () { $('input[name="nama"]').val().match(justChar); }); then where i must write the code for show the error type? @prash

spiderman Over a year ago

No, we didn't say that. We said to replace the way you call the regex matching. see my updated answer for the demo code. Also updated for hiding the error when you actually don't have an error

spiderman Over a year ago

what do you mean by that stupid comment? Its a tested code. You already accepted as answer though!. edited with jsfiddle link. Learn to respect and try first

|

user3398633 · Accepted Answer · 2014-07-13 23:47:19Z

2

Your regex check is misplaced, it is under the condition if ($('input[name="nama"]').val() === "") So the regex will never be checked

I got this working:

$(document).ready(function(){
    var justChar = /^[a-zA-Z]+$/;
    $('input[name="submit"]').click(function(){    
        if($('input[name="nama"]').val() === "") {
            $('.error').html('<ol></ol>');
            $('.error ol').append("<li>Name Must Be Require</li>"); 
            $('.error').slideDown('slow');
            return false;
        } else if(!justChar.test($('input[name="nama"]').val())) {
            $('.error').html('<ol></ol>');
            $('.error ol').append("<li>Name Must Be Character</li>"); 
            $('.error').slideDown('slow'); 
            return false;
        } else {
            return true;
        }
    });
});

answered Jul 13, 2014 at 23:47

user3398633

1 Comment

spiderman Over a year ago

didn't notice the way you organized it, +1

spiderman · Accepted Answer · 2014-07-14 03:59:32Z

Your inner condition is checked only if the value is empty. If it is not empty then your inner condition check is not even made. see outer check -

 if ($('input[name="nama"]').val() === "") {

update: Also, better to use the JQuery match as @Valentin Mercier has suggested. That's a good one

Remove the above line and your errors show up properly

Edit:

Showing the modified code for more clarity to the OP

$(document).ready(function () {
    var justChar = /^[a-zA-Z]+$/;
    $('input[name="submit"]').click(function () {
            if ($('input[name="nama"]').val() === "") {
                $('.error').html('<ol></ol>');
                $('.error ol').append("<li>Name Must Be Require</li>");
                $('.error').slideDown('slow');
                return false;
            } else if (!$('input[name="nama"]').val().match(justChar)) {
                $('.error').html('<ol></ol>');
                $('.error ol').append("<li>Name Must Be Character</li>");
                $('.error').slideDown('slow');
                return false;
            } else {
               $('.error').hide();
               return true;
            }
    });
});

Edit: Sharing the jsfiddle as the OP has still no idea! . Hope it helps!

http://jsfiddle.net/PrasanthSudarsanan/tLmD7/2/

Collectives™ on Stack Overflow

RegEx not working with my jQuery

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related