jQuery UI Widgets Forums Form How to validate Form

This topic contains 4 replies, has 4 voices, and was last updated by  Peter Stoev 1 month, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • How to validate Form #101345

    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.

    • This topic was modified 10 months, 2 weeks ago by  admin.
    How to validate Form #101362

    admin
    Keymaster

    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/

    • This reply was modified 10 months, 2 weeks ago by  admin.
    • This reply was modified 10 months, 2 weeks ago by  admin.
    How to validate Form #101373

    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.

    How to validate Form #104459

    Fabrice
    Participant

    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’ ?!

    How to validate Form #105151

    Peter Stoev
    Keymaster

    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/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.