Listen for semantic interface form validation errors before submitting
Using semantic UI form, modal and validation, I have a form in modal form and I don't want the modal to close if the form is invalid (which is what happens on submission).
The only way I can stop modal closing is by adding a class disabled
to the submit button.
I want to listen to a form (in real time) and turn the class on and off disabled
depending on the current state of the form validation.
I can only get it to work after 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');
}
}
);
source to share
Instead of using disabled for submit, make sure the modal stays open even when the submit button (modal approve) is clicked, and decides to close the modal values to validate the semantic form of the UI (like 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 the "OnApprove" event is fired only when the "ok" modal class button is clicked. So, you need a modal button:
<div class="ui ok green basic inverted button">
<i class="checkmark icon"></i>
Submit
</div>
Here's an extended working plunker code I created to demonstrate this: http://plnkr.co/edit/5fK7UuJIm7QTJGiu23NL?p=preview
source to share
I faced the same problem and contacted the Semantic developer. Note that they are going to revisit some additional, obvious, missing post-2.0 behaviors. You can now take a look at this thread on your github repo (form.js file): https://github.com/Semantic-Org/Semantic-UI/tree/next
Use the stopgap function is valid
, which returns true/false
if the form is validated.
eg.
if ( $('form').form('is valid') ) {
// do something
}
It will be 2.0
source to share
A combination of 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 advertise the callback onApprove
, keep in mind that besides the class selector .ok
(technically .action .ok
) denoted by @DruidKuma, the additional class selectors .action .positive
and .action .approve
also fire onApprove
.
source to share
I know this is an old post and now everything could change. None of the above solutions work for me as they cost and I couldn't find the missing part anywhere. This is how I finally figured it out:
$("#myModal").modal({
onApprove: function(e){
$('#myModal .ui.form').submit();
if (!$('#myModal .ui.form').form('is valid')) {
return false;
}
// Process the form data
return true;
}
});
I hope this helps someone.
source to share