Combining jQuery-Steps and Semantic UI

Question

Trying to combine jQuery-Steps (http://www.jquery-steps.com) and Semantic UI (http://semantic-ui.com), code is below. SemanticUI validation loses inline popups, need help.

Also, when moving to the next step, how to validate Semantic UI fields first?

<script>
(function ($) {
    $('#regform').form({
    email_address: {
    identifier: 'email_address',
    rules: [{
        type: 'empty',
        prompt: 'First Name is required'
    }]}
    },{
    on: 'blur',
    inline: 'true'
}).steps({
    headerTag: '#regform_sectionHeader',
    bodyTag: '#regform_section'
});
})(jQuery);
</script>

score 2 · Answer 1 · answered Jun 01 '15 at 01:33

Although this is a bit late, I bumped into the same problem as well, and solved it. Hopefully this helps anyone with the same issue.

I'm guessing this issue is due to initializing Semantic UI form validations first before the JQuery Steps.

The problem probably lies with JQuery steps moving the Semantic UI form HTML out of the content tag which originally holds it, and in to a new container, without copying the events properly when the wizard initialization is called.

So what you basically need to do is initialize Semantic UI settings and validation AFTER JQuery Steps. This can be done using the JQuery Steps onInit() event.

onInit: function (event, currentIndex) { 

    //Initialize Semantic UI dropdown
    $('.ui.dropdown').dropdown();

    //Initialize Semantic UI Form validations
    $(".ui.form").form(formValidationRules);
},

Full Working Code & Demo: http://plnkr.co/edit/5rVWPXZ7hAkqnZO9ubJP?p=preview

Combining jQuery-Steps and Semantic UI

1 Answers1