Develop Reference

Restrict input to 5 characters if whole number or 8 characters with fraction

I have simple text input:
<div style="float:right" class="xField">
<input id="userLength" name="userLength"/>
<label style="margin-left: 3px;">m</label>
</div>
I need this input to only accept numbers and if the number is a whole number, it should only allow 5 characters i.e. 12345. If the number includes a fraction, it should then allow for 8 characters i.e. 12345,99.
I've tried adding maxlength to the input but that only works with one of these conditions at a time.
How can I accomplish this?

You could use the pattern attribute and provide a regular expression that supports your requirements.
for example (this does not forbid entering invalid data, but will mark the field as invalid while the pattern is not matched).
<div style="float:right" class="xField">
<input id="userLength" name="userLength" pattern="\d{1,5}(,\d{1,2})?" />
<label style="margin-left: 3px;">m</label>
</div>

All you need is this:
<form action="/" id="form">
<input pattern="\d{0,5}([,.]\d{1,2})?" title="max 5 digits and 2 decimals">
<button type="submit">submit</button>
</form>
This will allow the user to enter as many characters as he wishes, but upon form validation the form will fail if the pattern is not satisfied.
The pattern is a regex and reads as follows: from 0 to 5 numeric characters and optionally up to two decimals
Also, if the input should not be empty you can add a required attribute like this
<input ... pattern="" required>
This causes also a validation failure if the input is empty.
When the pattern is not met, the browser will show whatever is inside title="" to the user.
Play around with this fiddle so you can see how the validation errors are presented: https://jsfiddle.net/aqohfsrj/2/
Also, if you want to do something with the input value using javascript, I recommend binding to the form's submit event and not the button's click or input's enter-keydown events
document.getElementById("form").addEventListener("submit", e => {
// if this code is executed it means the validation passed, otherwise errors
// are displayed to the user and this code is not run.
e.preventDefault(); // <-- to avoid trying to use the form's action i.e. the browser will not navigate.
});
To understand the regex I used you can see this regex101 file:
https://regex101.com/r/aHLI6u/1
Finally a recommendation:
Try to avoid maxlength for validation; often times I have had to fill in a form online that asks for a credit card for example, and it is limited to maxlength="16" which at first sounds like a good idea, but what if you try to copy your credit card from a note you have or something, and it was stored as 5430-0000-1111-2222 (with dashes). It feels rude to disallow pasting more chars than allowed, when all the user wanted was to paste, then edit, then submit. I would let the user add as much content as they want, so they can edit in-place to remove parentheses (for phones), remove currency signs (for money), remove dashes (for credit cards) and validate after they have submitted the form.

Regex to strip html tag with certain attribute

I have some invalidly-nested HTML like:
<form class="form1" method="get">
<div>
<input name="field1">
</form>
<form class="form2" method="get">
<input name="field1">
</form>
</div>
Yeah, it's a mess, don't ask. The invalid nesting is causing problems somewhere else. jQuery I think is expecting a closing </div>, and only finding it at the last one. It's then treating the second <form> tag as invalid, and also discarding the closing </form> immediately above it, and assuming everything between lines 1 and 9 are one form.
If I output these to the console:
$('.form1).html() - all of line 1 - 9
$('.form2).html() - undefined
So what I'm trying to do is treat the whole thing as a string, and use regex to strip out form2. I'm expecting a regex something like:
formText.replace(/(<form\b[^>]*>)[^<>]*(<\/form>)/gi, "");
but I'm not sure how to reference the specific form with class=form2.
There's also a problem with it being a multi-line string.
Update: added more detail, outlining why jQuery's remove() method isn't working. jQuery only thinks there's one form unfortunately.

Don't use regex to parse HTML. Since you're using jQuery, just use .remove():
$(function() {
$(".form2").remove();
});
JSFiddle

I ended up using:
formText = formText.replace(/(<form\b[^>]*form2+.*>[\s\S]+<\/form>)/gi, "");
The [\s\S] matches all characters including \n and \r to cover the newlines.
I could probably have made the part of the regex dealing with the class name more specific so I knew it was the class and not some other random form with a similar, but in practice it didn't matter (there was only one instance of the 2nd form, with a very specific class name).

How to read attribute value having special character in html

I have a requirement where I am getting id from a json response.
id="TICKET NUMBER (TK)"
The html component contains an attribute CI which has same value as ID.
When I am trying to access any attribute using ID, I am getting error as "unrecognized expression"
This is because of the special character present in Id.
Below is my sample html
<div class="col-sm-4" id="TICKET NUMBER (TK)" CI="TICKET NUMBER (TK)">
<label>Ticket</label>
<div>
<span></span>
<input id="ticket" ng-model="Ticket" >
</div>
</div>
Please help me on resolving the issue.

#Jefrey is correct, id shouldn't have spaces. Though you can access it using \\ before spaces and special characters:-
$('#TICKET\\ NUMBER\\ \\(TK\\)')
DEMO
$('#TICKET\\ NUMBER\\ \\(TK\\)').css('border', '1px solid red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="TICKET NUMBER (TK)" />

Please note the id attribute can't have spaces (source).
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
Consider using just the CI attribute. If you must identify the element through its ID attribute, consider MD5-ing the ID first.

Text box not accepting + sign

<input type="text" name="item" size=30 onKeyUp="this.value=this.value.toUpperCase()" value="<%=item%>">
on keying in item value : 1016M012G+10/1K16:1-C but it displays me only 1016M012G 10/1K16:1-C without a plus sign after G
1016M012G/10/1K16:1-C works fine
1016M012G-10/1K16:1-C works fine
what is the problem??

When submitting the value of the input field, you have to encode the string to keep the "+" in there, beacause when submitting inside a URL the plus ("+") will be treated as a space, which is exactly what you end up with.
The solution to your problem should be found here: How to URL encode a URL in JSP?

Restrict characters entered into a text_field

I have a text field where users enter a URL string, which cannot contain spaces or non-alphanumeric characters (if that's an accurate way of putting it).
Is there a way in Rails to restrict entry into the text_field itself so that spaces and characters like /":}{#$^# can be avoided?
Thanks a lot.
To clarify, the only characters that should be possible are letters and numbers.

The problem here is that URL strings can have slashes (/) and hash marks (#). So your regex is going to be quite complex to ensure the right portion of the field is filtered properly. But for plain character filtering, you can use simple regex to remove any non alpha-numeric characters.
Not sure about anything ruby-specific, but in straight javascript:
<html>
<body>
<form>
<input type="text" name="whatever" id="form-field" value="" />
</form>
</body>
<script type="text/javascript">
var oFormField = document.getElementById('form-field');
oFormField.onkeyup = function() {
oFormField.value = oFormField.value.replace(/[^a-zA-Z0-9]/, '');
}
</script>
</html>

You may use jQuery Tools Validator that uses HTML 5 tags to validate your forms.
This is a great way to validate your forms in an Unobscursive way without putting JS all over your forms :-).
Look at the "pattern" HTML 5 tag that allows you to validate a field against a Regexp.
http://flowplayer.org/tools/validator/index.html