I have a form that has one main field and a then bootstrap carousel that contains nested forms (there are multiple nested forms and the main form accepts nested attributes for these). Everything is functioning properly but I would like to add a validation. I'm using Jquery Validation http://jqueryvalidation.org/ for my other validations.
What I would like to do is have the bootstrap "next" button ONLY scroll next if the active form is filled out properly. I am having trouble finding the Bootstrap javascript that I might have to override and also could use help conceptually on what the best way to go about this is.
So far I've thought,
1. add JQuery Validation to each individual form that way then the user gets to the new form it will message them if they do not fill it out properly (however I think they could still just hit next if they don't start typing in the form)
2. Add logic to the next button so that if the active form fields are filled it functions properly but if the fields are not filled then it triggers a message.
I'm leaning towards the latter but open to other ideas as well. Before writing too much code, I would appreciate advice on how to override the javascript of the carousel next button and how to check for field completion but any other ways of going about this are definitely welcomed.
Thank you!
Related
I'm building a website using the ACF plugin (Version 5 Pro), and I'm setting up a button on a page template, which by itself isn't the problem. The problem is that depending on the specific content of each individual page using that template, the button can have one of several different appearances. What I'm trying to do is set things up so that I can upload all the buttons into the default value section of the ACF field ahead of time, and then every time I make a new page using that template, simply select the appropriate button from a radio button, a dropdown menu, or something similar on the backend of the page. I plan to be constantly uploading small amounts of content using this template, so not having to manually select the appropriate images on each page would save me a lot of time.
I've googled around and there wasn't a good answer I could find anywhere, so I'm hoping one of you more knowledgeable folks could help me out!
(And before anyone proposes this as a solution, no, the content of each page isn't something I can define just using programming. It's a little more abstract and needs human input. If all else fails I can just make multiple templates and simply select the appropriate one when I go to make a page, but the way I'm trying to do it now would be a lot cleaner).
You can try ACF Flexible Content:
https://www.advancedcustomfields.com/add-ons/flexible-content-field/
Using Flexible Content field, you will be able to create multiple fields (button 1, button 2, etc) including a WYSIWYG editor and build the buttons HTML adding the default value of the field.
You can read:
https://support.advancedcustomfields.com/forums/topic/html-default-values/
However, I think you'll get in trouble making your buttons dynamic with this approach... so I'd suggest it will be better if you keep some parts of the buttons (like URLs) dynamic, using an extra field to enter the URL, anchor, etc.
I have created a modal that works in moving the model from the modal to the form, however if the field has required: true, the form will not validate if the field is touched but then checked in the modal.
I have a working JSBin showing the issue.
As you can see from the example, I have tried various things to force the field to valid without any luck.
Any help would be appreciated.
No idea why you are moving the model to a modal and then back, it seems to serve little purpose. I have found cases when validation doesn't always work right, this seems to be one of them. You have two options. Use an expression property to check a separate flag you set when you select the field to change required to false or simply set a flag and use that to check validation manually.
In Salesforce, we have a button that creates events with the fields already filled out, but after the item is created I want it to reload the screen in the "Edit" view in case they want to change anything. Any ideas?
Do you need to validate fields values? Maybe it will be easier to do with field validation rules? It can be useful in cases when your data is populated not only from user screens, but also can be created in code (classes/triggers) or via API.
If you know that you exactly should to use JavaScript, you can add standard event attributes to command buttons on your Visualforce page and write JS functions for implementation of your validation logic.
I ended up creating a visualforce page with a controller and a custom button to accomplish what I needed.
I'm working on a project using Zend Framework.
I'm creating a form on which users can add a set of elements by pressing a + sign.
Zend framework uses subforms and decorators to get array of values from a form.
These will show when the page is displayed
How does the new fields created with Javascript integrate in that model?
The best demo of dynamically adding fields on the client to a Zend_Form with which I am familiar comes from Jeremy Kendall:
http://jeremykendall.net/2009/01/19/dynamically-adding-elements-to-zend-form/
The upshot of the technique is to add/call a preValidation() method on the form to check the post for fields missing in the form. If it finds any such fields, then they are added to the form object. By the time isValid() and getValues() are called, all the Zend_Form_Element objects have already been attached to the form, so processing runs as normal.
One suggestion would be to define all input fields that you want to provide using zend form.
But when the form is displayed you could hide certain fields and make them visible by clicking on +.
I think this is the most simple approach because for adding decorators and stuff you would need to change php files on client side and this is not possible.
Another suggestion, you could define several forms. Clicking on + redirectes the user to another form with an added field.
Here is the problem:
My page displays a set of items. Each item has a check box associated to it (which is part of a form). User might check any of these check boxes and press 'Delete' button. The same page also has a 'Upload' button which would upload an excel sheet of items.
At the moment, my form action sumbits to say : "xyzAction" and I have two different handlers (analogous to Struts Action) - one for deletion of stores and other for uploading stores.
I am told that the best way to do this is to rely on javascript by doing one of these:
1)) Switching form action on press of upload and delete buttons - there by invoke different actions.
2) Use a hidden variable "act" to set it to delete / upload and submit to a single form. The server side action would take care of identifying the act and forwarding to the corresponding action.
Approach (1) - seems very inelegant to me. Playing with form action seems unnecessary.
Approach (2) - would obviously not work if your javascript is turned off and is not very elegant either.
There must be a third way to doing this?, which would make me happy?
It sounds like you may need two different forms, for the two different actions.
You need to get the HTML correct first.
You have two different actions, so you should have two forms - a good rule of thumb is that each form should only have one submit button. This is the best practice for HTML and will ensure that the page works without JS or any other trickery.
Once you have the page working like this, use JS to manipulate the DOM to produce the UI that you need. This is using JS to add behvour to the UI and is best practice for unobtrusive JS.
(If you really want to conflate your actions in a single form, changing the action of the form with JS is the best course of action. But consider what would happen if a user checks a check box and then changes their mind and uploads a file leaving the checkbox checked. You should take care that this shouldn't delete anything.)