jquery validation on input

Question

I have a form that i am trying to validate. I have a field that i want to make sure is required. I have the following code for the field:

<p>
   <label for="lf">Name: </label>
   <input class="lf" name="name" type="text"/> 
   <span id="name_error" class="validate_error">Please enter a valid name!</span>
</p>

I want to be able to first off if they click in the box and don't type anything and then go to a different box, i want the span tag to show and also if they hit submit and didn't type anything.

I have the following jquery code, but it always shows the span tag no matter what.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

    <!--Name can't be blank-->
    $('#name').on('input', function() {
        var input=$(this);
        var is_name=input.val();
            if(is_name){
                $("#name_error").hide();
            }else{
                $("#name_error").show();
            }
    });

});
</script>

validator is the greatest plugin for this! - dropthebit.com/demos/validator/validator.html — vsync
– vsync, Commented Aug 4, 2014 at 20:21

Gabriele Petrioli · Accepted Answer · 2014-08-04 20:16:17Z

2

You are targeting with id, but the element does not have an id.

Either set id="name" on the input element

<input class="lf" id="name" name="name" type="text"/>

or use another selector input[name="name"] when targeting it.

$('input[name="name"]').on('input', function() {

(additionally, that html comment should not be there or it should have a // at the beginning)

answered Aug 4, 2014 at 20:16

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Comments

Bogdan Martinescu · Accepted Answer · 2014-08-04 20:11:20Z

1

I think it should be

$('input.lf').on('blur', function() {
    var input=$(this);
    var is_name=input.val();
        if(is_name){
            $("#name_error").hide();
        }else{
            $("#name_error").show();
        }
});

you have no name id on the input, sorry just noticed and fixed

answered Aug 4, 2014 at 20:11

Bogdan Martinescu

871 silver badge4 bronze badges

1 Comment

Brad Hazelnut Over a year ago

same thing it always just shows there and no matter what it doesn't hide

Kolby · Accepted Answer · 2014-08-04 20:14:52Z

1

Try this:

 $('#name').on('blur', function() {
    var input=$(this);

    var is_name = input.val();

     if(is_name){
         $("#name_error").hide();
     }else{
         $("#name_error").show();
     }
 });

http://jsfiddle.net/UR8m4/1/

You had a few problems, first, you didn't have the id #name on your input. Second, you need to hide the error with css to begin with. Third, you need to bind to the blur event.

answered Aug 4, 2014 at 20:14

Kolby

2,8633 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

jquery validation on input

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related