I want an input that permits multiple files with file-specific params. What are my options? I'm in Vue so forgive the idiomatic HTML.
<input type="file" multiple #change="handle()" :data-page-number="whatever" />
Is there any way to do this within a multiple input? Or do I need to nest-and-repeat single inputs with their own specific fields for page-number etc?
It's Vue, but it's also HTML, so all input options for file upload are available to you. I am not sure what "types" you are looking for but this should get you started:
// In your template
<input
type="file"
multiple
name="uploadFieldName"
:disabled="isSaving" // Optional add a data property isSaving default false
#change="filesChange($event.target.name, $event.target.files, $event.target.files.length)";
accept="image/*"
// or for many
accept="image/png, image/jpeg"
class="input-file"
>
For all input attributes see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
// add to your component methods
filesChanged (inputName, files, filesCount) {
// Do Stuff
// if using saving this.isSaving = true; to disable input
}
The files argument will contain an array of File(s) for all option see: https://developer.mozilla.org/en-US/docs/Web/API/File
Hope this helps get you pointed in the right direction. If this answer missed the mark a bit please update your question with more relevant information around what you are trying to achieve and I can help clarify.
<input id="format_ThisFormat" name="format_ThisFormat" type="hidden" value="##-##-##-##" />
So, I know this much to go on, but basically, my issue is that the input field is being cleared if the complete mask isn't being entered (For example, if just "12-44" is being input, the field will clear, but if "12-34-56-78" is entered, the field will stay. I want the ability to allow for partial inputs. Any ideas how I can edit this line to accomplish what I am trying to achieve? I'm assuming it's an issue with this line, I'm not just going to post thousands and thousands of lines of code because it won't make any sense, custom API in visual basic SPA.
you can add a event listener and check if the input is valid:
let input = document.getElementById('format_ThisFormat');
input.addEventListener('blur', (e) => {
if(!e.target.value.match(/\d{2}-\d{2}-\d{2}/g)){
e.target.value = '';
}
})
<input id="format_ThisFormat" name="format_ThisFormat" type="text" />
Is it possible to choose input type only for custom keyboard but prevent any browser validations so that entered value could be processed by the application?
I.e.
<input type="number">
With value 12345-123
On mobile device user would be presented with keyboard which allows to enter numbers as well as -. As soon as such value is entered browser returns empty string thus not allowing for me to choose and do validation on my side.
$0.value
with a return of:
""
I would like to use specific keyboards for some input types but I'm not sure if it's possible, if so - how?
Maybe try with $.val() not value. you can find the documentation here:
http://api.jquery.com/val/
http://codepen.io/TunderScripts/pen/jVvzNj?editors=1111
Html:
<input type="number" />
JS using JQuery:
var input = $('input[type=number]');
input.on('clic change', function(){
console.log($(this).val());
})
Hope it helps :)
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)');
This must be something utterly stupid that I've done or am doing, but I have an input with a value attribute that simply isn't being displayed:
<div class="input text required">
<label for="Product0Make">Make</label>
<input name="data[Product][0][make]"
type="text"
maxlength="255"
value="AC Make"
id="Product0Make">
</div>
Has anyone ever seen this before? Do I have some kind of typo that I'm just blind to? For whatever it may be worth, here's the CakePHP code that's generating this line:
<?php echo $this->Form->input( 'Product.' . $index . '.make', array( 'default' => $product['Product']['make'] ) ) ?>
I have a small form with a handful of text inputs, 1 textarea and 2 selects. None of the text input values display, but everything else is fine.
Any thoughts would be appreciated. I can't even believe I'm having to ask this question, but that's how crazy it's making me.
Argh. I knew this was going to be something beyond stupid. There was a bit of Javascript that was clearing data. The clearing was useful in other places, but I didn't know it was executing so it was a serious pain to track down. Once I prevented the clearing in this scenario, my values actually appeared. Because I was looking at the code in web inspector, I assumed that it would be a "live" view, but I guess that's not entirely true.
Thanks for your help, everyone.
For my side, it was a problem only for Firefox.
I resolved by adding the attribute autocomplete="off" in the input field.
<input type="text" value="value must appear" autocomplete="off"/>
Mine was related to AngularJS
I was trying to put both an HTML Value and an ng-Model, thinking that the ng-Model would default to the Value, because I was too lazy to add the Model to the $scope in the Controller...
So the answer was to assign that default value to the $scope.variable in the controller.
For me it was browser caching. Changing the URL string or clearing history can help.
For Googler's who may have the same issue: This can happen if you have a non-numeric value in a number type input field.
For example:
<input type="number" value="<? echo $myNumberValue; ?> "/>
This will show nothing even though Dev tools says the value is there, since the extra space after ?> makes it non-numeric. Simply remove the extra space.
Are you confusing the uses of the 'default' and the 'value' parameters for $html->input()?
If you're are using 'default' => $product['Product']['make'] and $this->data is present, the field will not be populated. The purpose of the 'default' parameter is to display a default value when no form data ($this->data) is present.
If you want to force display of a value, you should use the 'value' parameter instead. 'value' => $product['Product']['make']
For me it was because I was using the <input> tag without enclosing it inside a <form> tag
Had a similar problem with input value retrieved via ajax, correctly set and verifiable via browser console, but not visible. The issue was another input field having the same id, and it was not evident because of several JSP files included, many of them having forms.
I even set autocomplete to "off" with no result. I ended up putting the next jquery snippet at the document.ready event.
myForm.find("input").each((i, el) => {
$(el).val($(el).attr("value"));
});
Adittionally, this would be the equivalent in pure es2015:
document.querySelectorAll("myForm input").forEach(el => {
el.value = el.getAttribute("value");
});
If your not using a precompilor like Babel and you need compatibility for old browser's versions, change the "(el) =>" for "function(el)". I tried both codes in my scenario and worked fine.
For me the problem was that I had multiple inputs with the same id. I could see the value in the field, but reading it via javascript gave an empty value because it was reading a different input with the same id - I was surprised that there was no javascript error, just could not read the values I could see in the form.
For me it was wrong number format: Chrome expected "49.1", but ASP.NET passed "49,1", and it just didn't display!
<input type="number" value="49,1"/> // Should have been 49.1 !!!
Same problem occured on electron:
I was clearing the field with document.getElementById('_name').value = '' instead of document.getElementById('_name').setAttribute('value', "").
So I guess simple quote broke the field or input has a second value hidden attribute because I could rewrite on the fields and it won't change the value on the inspector
I had the same problem of #Rob Wilkerson, a onchange() was cleaning the value of the input with "", so i changed to 1. Such a dumb problem!
HTML
<input class="form-control inputCustomDay" type="text" id="txtNumIntervalo" onkeyup="changeTipoOptions()" value="1" min="1" />
Jquery
$("#txtNumIntervalo").val(1);
Mine was related to Angular.
I just ran into the same issue recently and realized that when you use NgIf to display a template, the said template does not automatically use display the data from the variables in the component.
As a quick fix I used ngClass just to Hide it and display it.
If anybody happens to be here because their input with type="dateTime-local" is not displaying the value... the value must be in format YYYY-MM-DDThh:mm