I am looking a solution similar to the formBindproperty in Ext.js but in ST2.4, validating my form, for example with a red underline in the specified field with an error.
How to do this?
Thank you in advance.
The property in ExtJS that determines if a textfield should be displayed with a red underline if invalid is allowBlank.
The equivalent property in SenchaTouch is required. The default behaviour is to place an asterisk next to the field label (no red line css is provided).
In SenchaTouch there is no form validation like in ExtJS. Therefore the formBind property you bind to buttons and the like in ExtJS to have them set to enabled/disabled does not exist.
The only thing I can think of is to extend the basic form panel and provide your own validation logic. I've implemented this in the following Fiddle. As long as you set any of your textfield items to have a required property that is true then the validation logic will kick in. Likewise the custom panel can be used without validation if none of the textfield items have the required property set.
You could also update the validateFields function I provided to update css classes if you want a visual indication that your form fields are invalid.
Hope this helps.
Related
I'm building a form editing page using the Formio editor and renderer.
I'd like to make specific form fields mandatory in the form editor. [different than making the field entry mandatory during submission]
There are two roles in the application -
Editor - Modifies the formio definition.
User - Submits the form data.
I'm specifically interested in making several 'meta-data' fields mandatory for the Editor. The Editor should not be able to remove certain fields from the formio component list.
A couple options I'm considering for implementation -
When the form is saved, inspect the form components and ensure the mandatory fields exist, and if they dont, create them.
Set a flag in the UI for specific components so they are 'disabled' and cannot be removed in the formio editor.
Has anyone implemented this?
You seem to be going in the right direction.
You can definitely do (as you suggested):
When the form is saved, inspect the form components and ensure the mandatory fields exist, and if they dont, create them or throw an error
Along with this, you can also extend the form builder and remove the "remove" icon that appears in the builder next to these mandatory components.
To do this,
Add a custom property to all the components, something like "customIsMandatory"
Modify the options.templates of the WebformBuilder to show a different template (one with "remove" icon removed) if the "customIsMandatory" is true for this component.
You can pre-populate these mandatory components in the builder and make sure that this property is set to true for them.
Using parsleyjs I would like to trigger a validation on only one field so I was hoping that this would work:
$('.form-input-field').parsley().validate();
But it does not work. Calling .parsley().validate() on the form it self does work thought and validates the whole form:
$('.form').parsley().validate();
Is there a way to manually validate only a single element?
Why I want to do this is because an error message needs to be visible when the parsley is initialized or as soon as possible before the user actually interacts with the element (but as mentioned only for one field in the form).
For this purpose, parsley has data-parsley-group attribute.
Check this fiddle. Also, check official documentation
So you field validation will look like
form.parsley().validate({group: 'group-1'});
I have the following problem:
I have a form where a user can opt to toggle a switch (Yes/No).
If they select Yes, I hide a couple of fields on my template (because they will now automatically be calculated).
The catch is that now, a set of different fields are required to not be empty for the successful submission.
The first fields need not be optional after the switch is clicked (since they are merely hidden but still submitted), but the second set of fields must be non-empty.
Is there a simple way to get this dynamic validation behaviour using Symfony's sfValidator classes, or should I simply hack together a solution using jQuery?
This sounds like a perfect case for the Callback constraint that already exists in Symfony. To quote the linked doc:
The purpose of the Callback constraint is to create completely custom validation rules and to assign any validation errors to specific fields on your object. If you're using validation with forms, this means that you can make these custom errors display next to a specific field, instead of simply at the top of your form.
This solves the backend, you still need to watch out for the required attributes of your fields so HTML5 validation can work properly.
Is it possible to set the validation error color on form fields manually? I couldn't really figure out how it was doing the validation on their site. Seems like the browser is doing it automatically based on the type attribute. But what CSS would I need to attach to trigger that state? I need to do a custom validation on a text field and the one that browser does automatically is not enough.
As I already wrote as a comment.
You just need to add the invalid class to your element.
Next time you could use the inspect element tool which is built-in in Chrome.
I would like to change the order in which the fields in a form get checked.
The field Email should be checked before the field City. They are both obligatory.
I would also like that when the email address is invalid only one Popup is shown (by default I get two- one saying the email is invalid and one saying that the field cannot be null)
Is it possible to change the order of the checks and do the custom checks before the system ones?
Marco
The only supported method of changing the order in which the fields get checked, is changing the order on the form. I'm assuming that CRM just loops through it's collection of controls to perform the field validations. You could attempt to dive into the CRM javascript and figure out a method to hijack it.
A supported way of handling it would be to make the fields not required (either via javascript on the OnLoad, or updating the entity definition itself), and then on the OnSave, writing your own field validation. It's a lot of extra work, and you lose the little red asterisk showing the field is required, but you'd be able to evaluate them in the order you'd like (or display a single message with everything that's missing (why that isn't done by default in CRM I'll never know)), and be able to fix your email invalid / not null message.
CRM does not loop through its collection of controls as specified in the answer above.
The validation of the fields(business required) on a CRM form happen in the order in which they were added to the form, irrespective of where they are placed in the form. So, as of now, the only way to change the order in which they are validated is to add them in the same order as you want them validated.
So far.. I believe the only option to work around this is stated in this link.
http://social.microsoft.com/Forums/en-US/8f402463-23aa-4bc1-862b-4f4093a0cce8/required-fields-order-of-validation?forum=crmdevelopment
Basically you would need to use javascript. Have only one field as mandatory. On change of this field set the next field (in the correct order) to mandatory and so on.. hectic but only way.