javascript/jquery input validation

Question

I have form where a user can add more input boxes on button click. User can have as much input boxes as they want.

I do not plan to add a button for removing fields.

They default number of input boxes is 2. Say the user decides to add 3 more, now there are a total of 5.

For validation, I would like to check if the input box is empty or if the input has all spaces like: " " no matter how many spaces as long as it has nothing else but space. I can do the check for an empty input by checking length, but how can I check for the latter? Is there a regular expression for any number of consecutive spaces? Thanks!

PS: I am using jQuery with jQuery mobile

@Schien The title says javascript /jquery and the tags include javascript so I'd say go for it. — rvighne
– rvighne, Commented Feb 18, 2014 at 1:23

rvighne · Accepted Answer · 2014-02-18 01:28:54Z

1

You can check if an input field is blank by checking its .value.length, as you already know. To check if it only contains whitespace, then try this: (assuming that the input is stored in a variable called input)

if (!input.value.trim().length) // oh noes! it's blank or whitespace-filled!

Reference.

answered Feb 18, 2014 at 1:28

rvighne

22.1k11 gold badges53 silver badges75 bronze badges

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

2 Comments

Jomar Sevillejo Over a year ago

Thanks! marked as answer and +1 for reference. trim() was what I was looking for. :)

msapkal Over a year ago

Just be aware that .trim() method is not supported in IE8 and earlier versions. You can use jQuery's trim.

Schien · Accepted Answer · 2014-02-18 01:36:37Z

1

Your question has a few components:

how to add input fields dynamically?
how to loop through these fields and validate them as well?
how to check whether a field really contains content, not just empty values?

We need to address all of these issues in a systematic manner:

Starting with the easiest - detecting empty string:

if (value.replace(/\s/g,'')=='') //string is empty

Next, to add input fields dynamically:

var myinput=document.createElement('input');
document.body.appendChild(myinput);

//the trick here is to "remember" this element for later use
document.myinputs=[];
document.myinputs.push(myinput);

To check all your input fields, you check the static ones first, then loop through the dynamic input fields:

valid=true; //default to true unless detected otherwise
for (var i=0;i<document.myinputs.length;i++){
  var input=document.myinputs[i];
  if (input.value.replace(/\s/g,'')=='') valid=false;
}

alert(valid);

answered Feb 18, 2014 at 1:36

Schien

3,9231 gold badge20 silver badges29 bronze badges

1 Comment

Jomar Sevillejo Over a year ago

Thanks! but rvighne's answer was the closest one :) trim() was what I needed, but looking at your answer and doing some quick google it does seem to fix the problem too. Also, on adding input fields I used .clone() from jquery Thanks! If only I could give +2

Collectives™ on Stack Overflow

javascript/jquery input validation

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related