Trying to validate form field with jQuery

Question

I know I must be missing something super simple here, because in theory this code is supposed to work, but it's not, and I cannot understand why. I'm trying to work out my own jQuery form validation, because I tried the jQuery form validator plug-in, and while setting up the rules and messages is perfectly simple, figuring out how to get the error message to show up where I wanted it to was a nightmare (couldn't get the message to show up AFTER radio buttons, for example.)

I've got the 1st part of my attempted validation working, but I can't clear the message once you enter something in the field. Also, the message pops up even when conditions are met, which doesn't make sense to me.

here's the jsfiddle

html

<form>
        <p>
        <lable for="name">Enter your name:</lable>
        <input type="text" id="name" name="name">
        <span class="error"></span>
        </p>

        <lable for="age">Enter your Age:</lable>
        <input type="text" id="age" name="age" width="3">
        <span class="error"></span>
        </p>
</form>

jQuery

$("input").focusin(function(){//highlight input field on focus
                $(this).css("background-color", "yellow");
            });
            $("input").focusout(function(){
                $(this).css("background-color", "white");
            });


            $("#name").keyup(function(){ //check against non-letter characters in name field

                var notLetter = /[^A-Za-z]/;

                if (notLetter.test($(this))){
                    $(this).next(".error").text("Letters only please!");
                } else {
                    $(this).next(".error").text("");
                }
            });

            $("#name").focusout(function(){//check that the field isn't empty

                if ($(this).val() == ""){
                    $(this).next(".error").text("You forgot to enter your name!");
                } else  {
                    $(this).next(".error").text("");
                }
            });

            $("#age").keyup(function(){//check against non-number characters in age

                var notNumber = /[^0-9]/;

                if (notNumber.test($(this)) != false){
                    $(this).next(".error").text("Numbers only please!");
                } else {
                    $(this).next(".error").text("");
                }
            });

            $("#age").focusout(function(){//check that the field isn't empty

                if ($(this).val() == ""){
                    $(this).next(".error").text("You forgot to enter your name!");
                } else  {
                    $(this).next(".error").text("");
                }
            });

First i noticed: if (notLetter.test($(this))), you should test val(), not DOM element.... maybe there are more similar errors... — sinisake, Aug 13 '15 at 01:17

yangli-io · Accepted Answer · 2015-08-13T01:34:47.760

You forgot the $(this).val()

        $("#name").keyup(function(){ //check against non-letter characters in name field

            var notLetter = /[^A-Za-z]/;

            if (notLetter.test($(this).val())){
                $(this).next(".error").text("Letters only please!");
            } else {
                $(this).next(".error").text("");
            }
        });

and again at age

        $("#age").keyup(function(){//check against non-number characters in age

            var notNumber = /[^0-9]/;

            if (notNumber.test($(this).val())){
                $(this).next(".error").text("Numbers only please!");
            } else {
                $(this).next(".error").text("");
            }
        });

also you can remove != false - e.g

if (test != false)

is the same as

if (test)

Heres the fixed up fiddle

score 0 · Answer 2 · answered Aug 13 '15 at 01:37

Need to Remember Some thing while validating form Using JS:-

Check input value Using (this).val();
if Error Occur then forward to next vale with Error .
Check test value is false or true using if (test != false) or if (test)
then forward your Control for success page

score 0 · Answer 3 · edited May 23 '17 at 11:44

You can use the lettersonly rule. Here's an example:

Define a variable validator and do this :

validator = $("form").validate({
  rules: {
    name: {  required: true,
             lettersonly: true 
           }
    }
});

It's worth noting, each additional method is independent, you can include that specific one, just place this before your .validate() call:

jQuery.validator.addMethod("lettersonly", function(value, element) {
  return this.optional(element) || /^[a-z]+$/i.test(value);
}, "Letters only please");

you need to call

$("form").valid()

and if it is valid means without any errors then do :

validator.hideErrors();
$("form" div.has-error").removeClass("has-error");

For age input for numeric only jQuery has implemented its own jQuery.isNumeric() added in v1.7. See: https://stackoverflow.com/a/20186188/66767

Trying to validate form field with jQuery

3 Answers3