How to validate Form

[Admir HodžićParticipant]

First, thanks a lot for adding form componet.
I hope this component is going to grow and become substitute for other 3th parity components we use to write and bind forms.
I am trying to implement one.
My question is .
How to validate form.

I see that there is required property in template.

Bu I do not see any method or builtin functionality for validation

Regarding this sample
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxform/form_submit.htm?bootstrap

there is in required: true for fields but you can submit form whit empty requierd fields.

[adminKeymaster]

The form does not offer built-in validation because each component can have its own specific rules. Furthermore, in some more complicated forms the validation result may depend on the values of more components and how they relate to each other.
You can easily handle validation by binding to form events. You can either use the change event (formDataChange), which is triggered whenever the value of a component inside the form changes. You can also use the buttonclick event (e.g. when you click button inside the form). You can see the form events example here:

https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxform/index.htm#demos/jqxform/form_events.htm

In addition, you can get a reference to any of the internal components and bind to any event that they provide. To do that use the getComponentByName function. For example, if you have the following component inside the form:

                {
                    bind: 'nubmberBoxValue',
                    name: 'numberinput1',
                    type: 'number',
                    label: 'Number input',
                    labelPosition: 'left',
                    labelWidth: '30%',
                    align: 'left',
                    width: '250px',
                    required: true
                }

You can get a reference to the component using this code:

               var numberInput = sampleForm.jqxForm('getComponentByName', 'numberinput1' );

               // Bind to any of event of the numberInput component or do something else with it

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Admir HodžićParticipant]

Thank You a lot.

In future version please considered to make API for error label.
As we already can set custom texts for label and info.
It will be great if we cloud set custom error message on form for component and call display if from code.

[FabriceParticipant]

Hello,

I used jqxValidator on a component belong to jqxForm.
I just want to know if my way of doing this is correct ?

    var nom = mainForm.jqxForm('getComponentByName', 'nom'); // nom === jqxInput

    nom.jqxValidator({
        rules: [
            {input: nom, message: 'The username is required!', action: 'blur', rule: 'required'}
        ], theme: 'summer'
    });

it’s strange to set jqxValidator on ‘nom’ and assign input attribute with this same component ‘nom’ ?!

[Peter StoevKeymaster]

Hi Fabrice,

We think this is ok. The validator is a plug-in component i.e it attaches behaviors to existing components. In the current case, this is the Form.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts