javascript/jquery input validation - javascript

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

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.

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);

Related

JSON is invalid when I take the value from HTML textarea when the user inputs text with multiple lines

So I have this json format of
{
questionID: int
studentAnswer: "String"
}
The studentAnswer field is populated from whatever is inputted in an HTML textarea. If I input something in one line only, the json is valid. But if I input something where i press enter to go to the next line, the json becomes invalid. I need the studentAnswer to be able to hold the input value with multiple lines. How can I fix this?
The problem is that multiline json's aren't valid. Since you're using a textarea, perhaps you can resize the textarea, restrict it, sanitize its inputs, or change the form type.
Ultimately, you want whatever the user input to be one line. Try this option out:
Is it possible to disable textarea's multiline option?

Understanding when an input box has bean cleared and new input inserted

I am using jQuery autocomplete with multiple input boxes interconnected, i.e. when inserting some value in the first input box and losing focus, the following input boxes get affected (i.e. values are filtered accordingly). Then I can focus and another input box and start typing some value, so that I get both filters applied (typed value and according to previous input box value).
Also, I setup an event for cleaning ALL input boxes when deleting all characters from an input box:
if (inputBoxTrigger.val().length == 0 && (event.keyCode == BACKSPACE || event.keyCode == DELETE)) {
jQuery.each(inputObjectArray, function (i, obj) {
obj.val("");
});
}
So, I cleanup everything when I just removed last character in the current input box. However, I could do the following:
1) Select the content of an input box (e.g. via mouse or holding shift)
2) Start typing something in this input box without pressing backspace or delete buttons
In this case, the input box gets cleared and a new character is inserted, but I do not catch this situation.
I attempted to drop the check on the backspace/delete button keyCode, but is does not work: when leaving an input box, the new input box is empty, so I just clean up everything (including previous input boxes).
Any ideas?
Maybe a more complex algorithm to detect string similarity?
If strings are very similar then it may be a simple correction, if not then it may be a completely different item and you may reset the form. You can also chain a length/direction comparison with a similarity comparison to fine tune it (i.e. do the similarity comparison only when going from a long string to another long string, ...).
On string similarity:
Compare Strings Javascript Return %of Likely
javascript text similarity Algorithm
http://andrew.hedges.name/experiments/levenshtein/

What is best way to make a calculation with input values from a html form?

I have a product form with 3 inputs
Price (fixed number)
Quantity (an input with type="text" where the user can enter a number)
Optional extra (a checkbox that the user can tick to add a number)
So far I have been using Javascript to get the value of the html elements, and then adding them and outputting the result into a html element.
I need the form to update on the fly, so that a user can enter a number into quantity and tick the box and the result update live. Unfortuantely I have been unbale to find a way to set variables when there is an update in a field, please see the link below of what I have done so far.
http://jsbin.com/tapen/2/watch?html,css,js,output
With Jquery its very easy to acess the value of an input field, or to set events to will execute when the field value is changed / updated.
As a pratical example i would suggest that you take a look in the code of a sample calculator using only jquery and html: http://firstemission.blogspot.com.br/2012/10/jquery-and-watermark-example.html

Prevent user from chaning tokens within input box

How to prevent the change of certain elements, tokens, within a textarea with javascript or jquery? For instance I have this string in an input
this is normal text {this can't be changed 1}. This is more text. {This can't be changed 2 }. And some more text
If a user tries to change text within the curly brackets I want to prevent that from happening.
I thought of finding the indexes of the start and stop indexes of the tokens and when a user tries to change an element, I would see if it falls within that range.
Is there a different approach that I can use?
You could use a regular expression to read everything between {} into an array when the page loads. Then when the form submits do that same thing again and compare them to make sure they are the same.
You should build a regular expression that validates the validity of the text. on every keydown event in the textarea revalidate the regex and notify the user / prevent the keypress.
As text can also be changes in other ways (paste, autocomplete, etc.) you should also validate on change event of the textarea.

PHONE VALIDATION: How To Overwrite Text In a Textbox When Typing Without Clearing Whole Field?

I would like to know how to create a script that overwrites text that is already in a text box. (in jquery or javascript)
Example: If I have a text phone field that says:
+1 (xxx) xxx-xxxx
When a user clicks the field, I want the characters to remain, and the focus set to the 4TH character in the text box, just after the 1.
Then, as a user types each number, it overwrites the x one by one, until all the x's are gone. But, I want the parenthesis and hyphen formatting to stay, so the users input forms around the formatting.
I would also like this form to only allow numbers, hyphens, and parenthesis, and not allow submitting if x's still exist.
If you can help me with this, THANK YOU! :-)
Try masked input plugin # [
http://digitalbush.com/projects/masked-input-plugin/
]1
Looks like it matches what you need.

Categories

Resources