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.
Related
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?
I'm using Materialized CSS and it works very well for me. However when I added more dynamic behaviour to my app, for example when I'm pre-populating form with values and appending them to the layout, here is the photo of that:
That happens only when I preset the value to form on/prior to page load (because my form html is generated by server side).
However if I were to click into the quantity field then quantity would go back to its place and it would stay there.
How do I make it so that it stays up even when I pre-populate the form value? Is there a class I need to add to it (label or input) or JavaScript or something that I can put out there.
If you want to pre-fill text inputs, use Materialize.updateTextField(); as the docs says
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.
I've looked everywhere on this.
basically what I have is a script that changes the value of some fields based on a radio selection.
For example: Think of it like a radio button that gets credit card data.
it works initially when the page loads and selects a radio. It will correctly load the data of that radio button.
Now when I choose to edit the fields manually, using it like a "new card" form, if I change my mind and go to select a presaved card, it will no longer update those fields I edited manually. It will completely ignore my request for it to change values via my javascript code that was just previously working. Note: It will actually still continue to work for any fields I left alone *did not manually type into/edit
so I was just wondering who else had that problem and what one does to fix it.
I am not sure if I understand exactly but I'll take a shot. My suggestion would be set apply a css class like "is-dirty" to the field once it has been updated and then you check to see if a given field has that class before updating it.
A client sent me a form template they had created using https://jotform.com to implement on their WordPress site. The form template is supposed to hide part of the form until the user clicks the next button. At which point a script is supposed to validate all of the input fields the user has presumably filled out and then display the rest of the form. While I have successfully managed to get the form to display the next part of the form when the user clicks next, it fails to validate the input fields.
It's kind of difficult to explain without a huge block of text so it is probably easier to show you:
The original working template that the customer sent me:
http://www.loftist.com/jotform/List_Your_Loft.html
The problem child:
http://www.loftist.com/?page_id=78
If you just click on one of the input fields and then click elsewhere on the page, the input fields successfully return a validation error message and prevent the user from clicking on the next button. However, if you simply click on the next button than the next set of fields get displayed.
Any thoughts? What am I doing wrong here? Im convinced this must be a really simple problem but Im not sure what it could be.
I don't understand the problem. Your first link, the original template, works for me with all the validations in place. The problem child on the second link is not a jotform form, and it doesn't have any paging stuff.
Do you mean jotform on your first web page is not working correctly? What does this have to do with the second form on your second link?