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?
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 have a complex Angular form representing a printable document. Form has two buttons to submit the form. One is for saving the working version and another to print the completed form to PDF.
The problem is simple, but more difficult to solve for me. Of course, when you are going to save a working version there will be unfilled fields. There are some allways required fields (such as name and personal ID) which are needed to save the form. Other fields are required only for printing. So the validity of these fields depends on the action (the button clicked by the user). I cannot determine the validity when the user is editing the field (angular validators are fired when fields content is changing), because I dont know which button will be clicked. I need to fire the validation of the whole form after one of the buttons was clicked. At that point I already know the action and can evaluate the validity of the fields (I have a custom angular validator to do this job).
My question is: how to trigger the (re)validation of the whole form from a function? If it is not possible, are there any other solutions to implement the validation described above?
I would prefer a solution where the $valid and $invalid properties of the fields are always set properly. My custom validator can ensure this. But how to trigger it on every field from a function? If it is not possible to trigger the validation by one function call, it is possible to iterate over all fields of the form? (to call the $validate() method of NgModelController)
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.
NOTE: This is a very specific question regarding Javascript and HTML forms. I have searched and cannot find an answer for this particular question, which involves the Dojo framework, and does not involve JQuery. Please do not mark this as a "duplicate" of a JQuery question, because it does not involve JQuery.
I need to submit a form by clicking a button which is of type "button", not type "submit". However, I also need to include the name of the button that was clicked, which is not normally submitted under these circumstances. The reason for this change (from the original "submit" functionality) is because there can be upwards of a dozen buttons on this dynamic form and if they are all "submit" buttons, the users will press "enter" to move to the next field and will be confused when the form does something unexpected (like submitting) instead of moving to the next field.
The method I have come up with to do this is to change all the button type='submit' tags to button type='button' controls. I then added this small Javascript fragment (we use the Dojo library so this is Dojo syntax):
query("button[type='button']").on("click",function(e) {
dom.byId("myform").submit();
}
This works but on the server side, it's not processed correctly. When a submit button is pressed, the form data (parsed by Chrome) looks like:
myInput1: 1
myInput2: Some Data
_button_Button23: addSomeFields
the last line is the button name and ID. When the form is submitted using the Javascript above, the last line is missing:
myInput1: 1
myInput2: Some Data
I need to add the last element to the form data before submitting it.
I have searched for this information but unfortunately all the existing examples use Jquery, which is not available to me in this case. How can I add this information to the form data using either Dojo or regular Javascript?
you could add the button element to the form on submit, or create an hidden input element and add that to the form
var form = dom.byId('myform');
form.appendChild(e.target);
form.submit();
I'm using Zend forms. I have a form to add a row to a database, which then generates a form with an 'Undo' button, along with a hidden element with the id of the added row. The 'Undo' form is posted with that just hidden element as the post data, but I'm wondering if there is a way to make sure that it wasn't modified, like with Javascript or something, so that only the most recently created row by that user can be deleted. Is that possible?
More details, if they are necessary: The constructor for the undo form takes the row id as a parameter, so I can't add an 'identical' validator because the only data I can check against is what was posted in the 'Undo' form, not the 'add' form.
Also, I need a solution that doesn't depend on Javascript.
Edit: Looks like sessions is the way to go. Got it working.
Your only choice is to validate the form on the back-end. Input from the user should not and cannot be trusted.
You could store the ID in the user's session and validate the input against that.
Try this:
http://framework.zend.com/manual/en/zend.form.standardElements.html#zend.form.standardElements.hash