I see that a lot of people are using directives to solve this problem which I find annoying. While I like directives it feels like massive overkill.
I have an input
<input maxlength="4" type="text" id="CustomerNameKey" name="CustomerNameKey" class="form-control" ng-model="detail.customerNameKey" placeholder="Customer Name Key" required />
I thought the business requirement was just limit to 4 alphanumeric , so this code works great
maxlength="4"
However I cannot allow any number ( so only allowing a-z / A-Z )
Seems like I see
angular documentation with it throwing out warning to the page, but it is not restricting the input I prefer to not allow more than 4 characters to be typed , and only alpha
all these directive solutions seem crazy to me
Any inline regex i can do?
As mentioned in the comments, the best approach is to use a directive. In fact, I just made one, you can see it in the jsFiddle
myApp.directive('smartInput', [
function() {
return {
restrict: 'E',
scope: {
value: '='
},
link: function(scope, element) {
element.bind('keypress', function(event) {
if (event.key.search(/\d/g) != -1) {
event.preventDefault();
}
});
},
template: '<input type="text" ng-model="value">'
}
}
]);
http://jsfiddle.net/HB7LU/28432/
EDIT:
HTML5 supports input checking in html input elements by use of the pattern attribute, although it does not respond in real time and must be used with a submit. If this is the functionality you are looking for, you can get away with a simple element:
<input type="text" name="charInput" pattern="[A-Za-z]" title="Not Numbers">
more information can be found on the w3 page on the pattern attribute. Also noteworthy is the fact that this does not appear to be supported by safari
Related
Ok so I don't know the first thing about knockout.js and that may be my issue.
I am maintaining an ASP.NET application and I was tasked with changing an html
file in the solution that uses knockout.js. Here is the line of code that is having an issue:
<input type="number" class="form-control" data-bind="value: Quantity, uniqueId: Quantity, uniqueMod: 'measure-quantity', enable: IsNotListMeasureIndividually() && !IsNotInstalled()" />
This input tag is allowing the user to enter a negative number and we dont want to allow that. So what I tried was to add min="1" to the tag. The result was it got ignored then moved on to the next set of lines of code
then blew up.
Is the reason that the min is not working because this is not just a simple input tag and includes knockout references in the data-bind?
If so, how can I go about putting in the desired validation to
only accept positive numbers? Please help and remember I know nothing about knockout. Thank you!!
Try Something like this. Use javascript to ignore the keypress of the negative symbol. I don't think that all browsers support the number type Of course you will need the correct handle to assign the keydown event to the right input box.
document.getElementByTagName('input')[0].addEventListener('keydown',function(e){
if ( event.which == 109 || event.which == 173 ) {
event.preventDefault();
}
});
jsfiddle
This combined with the min="0" attribute will prevent the number block from allowing negative numbers.
For an application which is close to be developed completely, requirement is to make focus management.
The popup opened should focus on the first HTML element
On successful login, the focus should point to navigation links.
On every route or page load, the focus could be defined in a generic way if possible.
Any ideas people for getting the above three requirements done for the application.
For 1st one, i can do manually the auto-focus attribute for the form or html element to keep focus on it or any other generic way for achieving it? Also, about the other two points?
Thanks in advance
You could start with this directive and apply it when needed, if I understood what you need:
.directive('autofocus', function() {
return {
restrict: 'A',
link: function($scope, element) {
element[0].focus();
}
};
HTML:
<input type="text" name="test" autofocus>
Simply put, is it possible to have a single HTML input field with multiple email addresses (comma or semi-colon separated) validated using Parsley?
I could not find that it is possible through their documentation so I am trying to see if there is anything I might be missing.
If the case is that it is not possible then I am open to best alternative solutions to combine with my current Parsley validation of the rest of the fields.
Your input is appreciated.
you can use multiple email addresses you must add this attribute multiple = "multiple" inside input element example:
<input type="email" multiple />
but I don't used Parsley
this is link to website where you can find example pattern for multiple email addresses
example
the trick I came up with to validate comma separated input of emails with parsleyjs was to create a custom validator for a text field and rely on the browser's native support for validating multiple emails:
<input type="text" name="emails" required data-parsley-multipleemail>
(nb: we did not use <input type="email" multiple /> so this solution won't degrade to a proper email field.)
Parsley relies on the browser's native validators when available, so we'll do the same. (FYI using regexp for email validation is a pandoras box) Before loading Parsley.js, define a your custom validator like this:
window.ParsleyConfig = {
validators: {
multipleemail: {
fn: function (value) {
return $('<input type="email" multiple>').val(value)[0].checkValidity();
},
priority: 32
}
}
};
what this does is
create a virtual email input element
assign it the submitted value
[0] gets us the native javascript element (ie without jquery)
then we use the browsers native ValidityChecker which returns either true or false
return the result
lastly, insert this code after you load parsley to create a custom validation message (in english) for this validator:
window.ParsleyValidator && window.ParsleyValidator.addMessage('en', 'multipleemail', 'Invalid email(s)');
I'm writing an alarm web app. I have two number inputs, one for the hours, one for the minutes. Thus, when I use my keyboard arrows, they go from 0 to 23/59. Is there an HTML native way to make them go from 00 (01,02, et.) to 23/59 instead ?
I'm only worried about the UI aspects as my JS manages the missing 0 anyway.
EDIT - As requested :
What I have :
What I want :
Instead of going from 0,1,2 to 59, I'd like to automatically have a leading 0 when the number is smaller than 10 (00,01,02 to 59).
I use this to just prepend zeros as needed:
<script>
function leadingZeros(input) {
if(!isNaN(input.value) && input.value.length === 1) {
input.value = '0' + input.value;
}
}
</script>
And I just call that on the input's various events how ever works best for me, for instance:
<input type="number"
value="00"
onchange="leadingZeros(this)"
onkeyup="leadingZeros(this)"
onclick="leadingZeros(this)" />
It's not an ideal solution, mainly because there's a slight visual change as the user changes the number and the zero is prepended, but it works for me :)
Edit: Forgot to mention, I appreciate the answer asked for a native solution without javascript, but I wanted to provide something for people landing here through a Google search.
I'm afraid there is not native HTML way to do that unless using a Select tag. If you are using a text input you have to add the leading 0 on the 10 first values by javascript.
The correct, modern solution to OP's problem would be to use a input with type=time and then they don't have to worry about leading zeros or any of this other stuffs.
Adding on to some of the other answers that suggest using an event listener. I've tested this with jquery in chrome and it seems to work well with the padding without the slight flashing side effect.
<input type="number" id="input-element-id" value="00">
<script>
$('#input-element-id').on('input', function() {
const value = $(this).prop('value')
$(this).prop('value', value.padStart(2, '0'))
})
</script>
Is there any simple language similar to Markdown or one of the Wiki Markups that gets converted into HTML form elements?
For example:
name* = ___________
sex = (x) Male () Female
phones = [] Android [x] iPhone [] Blackberry
city = {BOS, (SFO), NYC}
Would get converted to:
<label>Name (required):</label><input type="text" name="name" id="name"/>
<label>Sex:</label><input type="radio" name="sex" value="Male" checked="checked"/> <input type="radio" name="sex" value="Female"/>
<label>Phones:</label><input type="check" name="phones" value="Android"/> <input type="check" name="phones" value="iPhone" checked="checked"/> <input type="check" name="phones" value="Blackberry"/>
<label>City:</label>
<select name="city">
<option value="BOS">BOS</option>
<option value="SFO" selected="selected">SFO</option>
<option value="NYC">NYC</option>
</select>
It would be simple to create one myself, but if any existing library/language supports it already, it would save me some time in implementation, documentation and maintenance. It would be preferable if the library worked either in Java (so we could run it server-side) or JavaScript (so we could run it client-side).
Update: I created a github project for this and maleldil implemented it. Feel free to try it out!
I have not been able to find a library that suits my needs, so I forked the WMD project (which SO uses for its Markdown syntax highlighting) and put the project on on Github. I didn't have time to implement it, but maleldil kindly did it himself, so try it out!
I took a swing at the problem at https://github.com/bradgessler/formdown with a slightly different syntax:
Hi _________(Name)
How are you doing today? () Good () Ok () Bad
Could I have your email address? __________#(Email)
Write a few lines that describe your mood: ____________///(Mood)
[ Submit your feelings ]
This is packaged up as the formdown gem and can be used in Rails to render forms via the .fmd file extension (e.g. app/views/users/edit.fmd.html).
Not an answer.
I think it should read
sex = () Male () Female
in order to get radio buttons, because
sex = [] Male [] Female
would result in checkboxes (meaning you could be both male and female)
If your going to implement it. Also, you would hae to require one question per line, so you would know what to group up, otherwise any two () would be linked.
I also suggest you do not try to put values inside the () or [], since its easier to search for them w/o text inside. But you might also add () as selected and [] as checked. If you use that tho, you cant have that stream of characters apear in the questions.
Just my 2 cents in case your going to implement it.
<< GET "/post.php";
label*: __|n="inputname"|v|p|i|c|l|disabled|readonly;
password: *|n|v|p|i|c;
select: { 'multi word value'= 'Option', 'value2'='Option 2', !'value1'='Option 3' }&|n|i|c;
(!)|n|v :label for previous radio; ()|n|v :label for previous;
label for checkboxes: [!]|n|v; []|n|v;
Message:____|rows|cols|c|p|v;
File: ^|size||types|i|c
#submit|v="Send Message";
#reset|v="Reset Form";
>>
<< and >> are form start and end signs
"this is a label":
* immediately after the label is for required fields
__ is text input
| attributes are separated with pipes (n="name of the field"|c="class of the field")
; is for field separation
{} select is much like an associative array.
! is for checked/selected values
:"label that comes after the value" for radios and checkboxes
____ is textarea
^ caret is for file input (up sign for upload)
#submit for buttons
.. now only if someone implemented this. :)
i came across http://www.jspwiki.org/Wiki.jsp?page=WikiFormsPlugin some time back. not sure f you can reuse the class tho.
I am working on a PHP solution that extends Michelf Markdown. Currently, basic <input> and <textarea> elements are supported.
It uses this syntax:
?{type}("label" "value" "placeholder" rows*cols){.class}
Where type can be an input type (<input type="...") or textarea which results in a textarea.
See https://github.com/rbnvrw/markdown-forms for the code and feel free to contribute.