In my form, the user can toggle the visibility of certain form elements using Knockout in order to save space. If the elements are visible and the user has not filled out the required fields, when they press the save button, HTML5 will notify the user of the required fields. However, when the elements are hidden, the save silently fails in that pressing the button does nothing.
The only indication to the user that something is wrong is that the save button does not respond. Of course in the console it has the familiar message 'An invalid form control is not focusable'.
Have you dealt this with issue before? How did you address it? I don't want to take away the required attribute. I suppose that one solution could be to validate with JavaScript for those types of fields instead of HTML5. Suggestions are appreciated.
Similar question:
An invalid form control with name='' is not focusable
use form submit instead of read value from selector. because HTML5 required filed will work if form get submitted.
Related
can anyone please help me, with my upload form code, for some reason my onChange function on the other inputs prevent you from adding images first before filling in the other fields, if you do it automatically submits the form. This is not a working version, but it is the full code: https://codesandbox.io/s/reverent-hugle-rsqqx
I'm not referring to the splitURL message it shows, if you fill out each of the text fields and then add the images, it's fine.
It doesn't submit, which allows the user to click the submit button.
If you add images first and then fill out just one of the text fields the form submits automatically.
I do not want this, I am designing a page where I would like to have the option to add the images for upload before filling out the rest of the form.
The only thing I can pinpoint it down to is the onChange function, if i remove that from one of the inputs I can fill out the input after adding images.
found the problem, the library "react-filepond" main element "FilePond" is specting an array of objects in the "files" property, so to fix the problem you just do the following:
// Add the spread operator in the items array too.
setPosterCollection([...posterCollection, ...items]);
This will fix the error and allow the user to fill the form in any order as he/she wish to.
I'm working on a web UI that has a form which users can either fill out themselves, or load data into and then edit. They want certain fields to use the autocomplete option, and so to start I've added this to one field:
<form type="submit" autocomplete="on">
<input type="text" class="form-cmd" id="command"
name="command" ng-model="fields.command" />
</form>
This sort of works, but not the way I need it to. Regardless of whether the user types it in or loads the info into the field, they have to hit Enter or else the text doesn't get included in the autocomplete list. The problem is that there's currently no requirement to use the Enter key (and in practice nobody does). Once the form is filled out, a button (Add Entry) is clicked that takes all the info in 'fields' (which includes all the info from the form, fields.command, fields.name, etc) and then makes a REST call using that data as args.
I've been toying around with trying to just trigger an 'Enter' keypress in that field programatically behind the scenes in the Command text field when the Add Entry button is clicked, but so far I haven't had any luck and I'm wondering if I'm not just missing something simple here. Does anyone know how to achieve this?
I have a problem with client validation when showing several model forms on the same page. It's like a list where the user can toggle the input forms, only the ones that are selected will be saved.
I already wrote some javascript code that removes and reinserts the name attribute on each field, but obviously the invisible fields are still being validated, resulting in the user being unable to submit the form.
I already had a look at the "whenClient" validation property in my model, but the problem there is that I don't know how to select the field that is being validated.
If there was only one form on the page, I could easily select each input field, but with many forms the id's are like "modelname-index-attribute".
So I would need to access the field being validated with javascript or find another way to submit the form.
By the way, I also tried to remove all the hidden forms on submit, but if a visible form has errors, the form would not be submitted and the deleted fields could not be made visible. I also encountered a strange behaviour where the client validation doesn't happen when I remove and reinsert a form using javascript, but this would be a different issue.
I add form fields like this:
<?= $form->field($model, '['.$i.']attribute')->textInput(...); ?>
Any ideas?
When a input textbox is disabled, you can not enter any values into the Inputbox.
However if you use google chrome and right click on the inputbox then click on inspect, you can change the values.
How do you stop people from editing a disabled inputbox?
You can't. The only thing you can (and always should) do is validate user's input on server.
There is no way you can stop people from changing its state and sending the data. There are two way you can do this
Do not display the disabled input at all. Just like what Zend_Form does.
Check the field when the form was submitted and remove it.
As I known, the disabled input value won't be posted to server side. So if someone change the value using tools, the modified data will not be posted.
I have a checkout form that will display a pop-up survey to ask why they haven't started filling out the form after 5 seconds. However, I need to be able to check whether the user has actually entered data as opposed to data entered by the browser's auto-fill feature (any pre-populated data set in the markup I specifically ignore in the javascript or jQuery).
Right now my solution is to have the setTimeout run a function which checks a variable (true or false) that is set to false on a jQuery .focus or .change event on the input types (input, select, textarea). However, since the javascript may load after the user is able to use the form elements, I have to check whether the user has entered data before the survey pops up.
Is it possible to differentiate between user-inputted data and browser-inputted data if the javascript loads after the user has done anything to the form fields?
If you really want to tell browser not to autofill it at all, you could use autocomplete attribute, but this is unfortunately an invalid attribute and thus will not validate. If you really need your HTML to validate, you can use jQuery to do just that for you:
$(your_form_selector).attr('autocomplete', 'off');
More discussion about autocomplete here
What about .keyup event for form?
var isFilledByUser = false;
$("#input").keyup(function(){
var isFilledByUser = true;
});
ok... this was mildly entertaining, but I definitely agree... this feature would be so annoying XD
http://jsfiddle.net/NTvrN/1/
but there you go... now type, foo!