Listen to Semantic UI form validation errors before submit

Question

Using Semantic UI form, modal and validation, I have a form in a modal and I do not want the modal to close if the form is not valid (which happens when submitted).

The only way I can stop the modal from closing is to add a disabled class to the submit button.

I want to listen to the form (in real time) and toggle the disabled class on and off depending on the current form validation state.

I can only get it to work once the form is submitted but not in real time

$('#myForm')
    .form({
        title: {
            identifier  : 'title',
            rules: [
                {
                    type   : 'empty',
                    prompt : 'Please enter a title'
                },
                {
                    type   : 'length[2]',
                    prompt : 'At least 6 characters'
                }
            ]
        }
    },
    {
        onSuccess: function() {
            $('#submit').removeClass('disabled');
        },
        onFailure: function() {
            $('#submit').addClass('disabled');
        }
    }
);

Solution 1

Instead of using disabled for submit, make sure modal stays opened even with clicking on the submit (Modal approve) button, and pass the decision to close modal to semantic UI form validation events (i.e. onSuccess).

So something similar to this:

$('.ui.modal').modal({
        onApprove : function() {
          //Submits the semantic ui form
          //And pass the handling responsibilities to the form handlers,
          // e.g. on form validation success
          $('.ui.form').submit();
          //Return false as to not close modal dialog
          return false;
        }
    });

var formValidationRules =
{
    title: {
        identifier  : 'title',
        rules: [
            {
                type   : 'empty',
                prompt : 'Please enter a title'
            },
            {
                type   : 'length[2]',
                prompt : 'At least 6 characters'
            }
        ]
    }
}

var formSettings =
{
    onSuccess : function() 
    {
      //Hides modal on validation success
      alert("Valid Submission, modal will close.");
      $('.modal').modal('hide');
    }
}

$('.ui.form').form(formValidationRules, formSettings);

Note that "OnApprove" event only fires when you click on the modal button with the class "ok". So you need a modal button like so:

<div class="ui ok green basic inverted button">
  <i class="checkmark icon"></i>
  Submit
</div>

Here's a extended working plunker code I created to demonstrate this: http://plnkr.co/edit/5fK7UuJIm7QTJGiu23NL?p=preview

Solution 2

I've faced the same problem, and contacted with Semantic developer. Take notice that they are going to revisit some additional, obvious, missing form behaviors after 2.0 launch. Now you can take a look at this branch on their github repo (the form.js file): https://github.com/Semantic-Org/Semantic-UI/tree/next

Make use a stopgap function is valid which returns true/false if form validates.

e.g.

if ( $('form').form('is valid') ) {
  // do something
}

This will be in 2.0

Solution 3

You can use Semantic UI API to prevent to submit the form.

$('.submit.button').api({
    beforeSend: function(settings) {
        return false;
    }
});

Solution 4

A combination of the solutions from @DruidKuma and @Oniisaki worked for me:

var formValidationRules;

$(function() {
  return $('.ui.modal').modal({
     onApprove: function() {
       if ($('.ui.form').form('is valid')) {
       return true;
       } else {
       return false;
       }
     }
  });
});

formValidationRules = {
  fields: {
    name: 'empty'
  }
  // Additional validation fields would go here
};

$(function() {
  return $('.ui.form').form(formValidationRules);
});

To expound on the onApprove callback, be aware that in addition to the .ok (technically .action .ok class selector) denoted by @DruidKuma additional class selectors of .action .positive and .action .approve will also trigger onApprove.

View more solutions