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.

Angular 6 url pattern validator

In an input form Angular 6 I want to check if the input url supposed to contain the Facebook url really is a valid url which contains as substring either the string “facebook.com” or “fb.me” and if it is not the case return an error message.
Im stuck with the following:
<div nxRow>
<div nxCol="12">
<nx-formfield nxStyle='negative' nxLabel="FACEBOOK">
<input nxInput type="url" ng-model="facebook" pattern="^.*facebook.com*$/" value="{{facebook}}">
<span nxFormfieldHint>
Link zur Facebook
</span>
</nx-formfield>
</div>
</div>

You could try adding a dot before the * like ^.*facebook.com.*$ to match any character zero or more times.
Right now you are repeating the m zero or more times.
To check if the string contains either facebook.com of fb.me you might use an alternation:
^.*(?:facebook\.com|fb\.me).*$

Protractor: Unable to pass text into text box

I must be missing something very obvious with this but when I try to pass text into an input field, the script doesn't fail but it also isn't entering text into the text field. If it makes any difference, the text field will only accept numbers.
This is the html
<input type="number" class="form-control au-target form-control-warning" value.bind="bidAmount & debounce:500 & validate" au-target-id="126" placeholder="Enter Amount">
This is how I try it on my page object file
var amount = 60;
return element(by.valueBind('bidAmount & debounce:500 & validate"')).clear().sendKeys(amount);
I've also tried by.cssContainingText() and by.css() but neither are working

You can try,
$("input[placeholder='Enter Amount']").clear().sendKeys('hello');
or more explicit
element(by.css("input[placeholder='Enter Amount']")).clear().sendKeys('hello');

Do you get it with :
$('input[type="number"][class="form-control au-target form-control-warning"]').clear().sendKeys(amount);

angularjs: How to get text exactly same as in enter in text area, including new line?

In angularjs, how to get the exact text as entered into html textarea, I want to also track newlines, '\n' (in the textarea). I want to store this textarea into database exactly the same as entered into textarea. But it is taking all text into one line.
How do I detect that new line is inserted into html-area?
Please see the demo
I can use <pre> {{someText}}</pre>, but this will not solve my problem, Because I want to store into database.
<div class="col-md-12">
<div class="col-md-6">
<label >Location Based Address </label>
<textarea rows="4" cols="25" class="form-control" ng-model="someText">
</textarea>
</div>
</div>

I belive that the model does save newlines and such, see this small edit on your plunkr, using a <pre> tag to display the data.
Also, when I save data to my SharePoint list, in a 'rich text' field, it saves newlines. I think your problem is that the server doesn't preserve the new lines.

Please check i have edited your plunker code. Check updated code
angular.module('app', ['ngSanitize'])
.controller('SomeController', function($scope,$sce) {
console.log($scope.someText);
$scope.$watch('someText', function(){
console.log($scope.someText);
$scope.text = $scope.someText;
$scope.text = $scope.text.replace(/\n\r?/g, '<br />');
$sce.trustAsHtml($scope.text)
})
})
Hope this will help you.

You could replace spaces with \n and store it that way, but I'm not sure how 'strong' this solution will be.

Value from the textarea is passed as is to someText via ng-model="someText". You don't need to do anything with the text as you can see in console.
If you want to print the value somewhere on your page while keeping new lines as the user entered them use <pre> tag:
<pre>{{ someText }}</pre>

Well i'm not really sure of what is happening but i'll try a wild guess of all things that can happens :
When using textarea, \n characters are stored in the value of the ng-model.
If you want to display them either use <pre> or replace all \n by and use ng-bind-html (https://docs.angularjs.org/#!/api/ng/directive/ngBindHtml)
If you want to send them to the server through json you may have to escape \n to \n same when sending data from the server to the client. Or it will be the underlying layers off your framework that will do it.
Make sure you're working with UTF-8 server-side/database or you may have problems with \r\n and \n.

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