CODEWITHSUNDEEP
javascriptjquery
C0ol_Cod3r
C0ol_Cod3r

Reputation: 949

Checking my users input is a number of a set length?

Ok, I have a form with lots of different inputs, each has the same class name on it. What I need to do is loop though all of these inputs, which the user can add more to, with an AJAX call, making sure all inputs are four numbers only.

Now I can get it to check that it is of a length but when I try to add a check to make sure its a number, it does not seem to work, this is my current code: 

var ValidMyData = function() {

        $('#FORM-ID-HERE').on('submit',function(e) {
                e.preventDefault();

                Numbers = $('.NumberClass');


                //Check if job number is only 4 in length
                function CheckNumbers()  {

                     $(Numbers).each(function() {
                        var GetCurrentInput = $(this).val();

                        if( GetCurrentInput.length != 4  ) {
                             return $(this).css("background-color","#FF0004");

                        } else {
                            return $(this).css("background-color","transparent");

                        } //End of if

                    }); //End of each

                } //end of inner function

        }); //end of on submit function

} //end of valid check function 

ValidMyData();

This works, if the inputs on my number field are not four in length, it makes the background color red, and then removes that background color if its then changed to be four.

I have tried some things but nothing as worked. I have mainly being playing with the IsNumeric() function, by adding that on my if check. Also, although this works, I don't think my return call is working right, I think I am doing something wrong but can not put my finger on it :). - When I console.log the CheckNumbers() inner function, I get undefined back.

All help most welcome.

Thanks

Upvotes: 0

Views: 53

Answers (1)

Amin Jafari
Amin Jafari

Reputation: 7207

this code will check if it is 4 characters and if it's a number:

var ValidMyData = function() {

        $('#FORM-ID-HERE').bind('submit',function(e) {

                Numbers = $('.NumberClass');


                //Check if job number is only 4 in length
                function CheckNumbers()  {

                     Numbers.each(function() {
                        var GetCurrentInput = $(this).val();

                        if( GetCurrentInput.length != 4  || !/([0-9])+/.test(String(GetCurrentInput))) {
                             return $(this).css("background-color","#FF0004");
                             e.preventDefault();

                        } else {
                            $(this).css("background-color","transparent");

                        } //End of if

                    }); //End of each

                } //end of inner function

        }); //end of on submit function

} //end of valid check function 

ValidMyData();

EDIT

I updated the answer using your own code, which now will submit the form if all the inputs are filled correctly, else it highlights it and doesn't submit the form.

Upvotes: 1

Related Questions