Semantic user interface: how to prevent form submission after validation check?
I have a basic login form and I have specified form validations and API calls in my javascript file. The problem I have is when I click the login button and the form has errors, invalid fields will be highlighted, but the API call will still be executed even though the form is not valid.
Here's a simplified example:
<form class="ui form">
<div class="field">
<input name="username" type="text" placeholder="Username" autofocus>
</div>
<div class="field">
<input name="password" type="password" placeholder="Password">
</div>
<button type="submit" class="ui submit button">Login</button>
<div class="ui error message"></div>
</form>
$(function() {
$('form').form({
username: {
identifier: 'username',
rules: [{
type: 'empty',
prompt: 'Please enter your username'
}]
},
password: {
identifier: 'password',
rules: [{
type: 'empty',
prompt: 'Please enter your password'
}]
}
}, {
onFailure: function() {
// prevent form submission (doesn't work)
return false;
}
});
// *** this API call should not be made when the form is invalid ***
$('form .submit.button').api({
action: 'login',
method: 'post',
serializeForm: true,
dataType: 'text',
onSuccess: function() {
// todo
},
onError: function() {
// todo
}
});
});
I also have a punkr here that demonstrates the problem I am facing.
Did I miss something? Are the calls .api()
and being made correctly .form()
?
source to share
Ok I figured it out. All I have to do is change
$('form .submit.button').api(...
to
$('form').api(...
I didn't understand what I can call .api()
directly on the element <form>
. Now the api call fails when the form is invalid because the form has not been submitted (previously I had an api call to the submit button that does not get canceled when the form is invalid).
source to share
Use onSuccess event instead of api method.
$('form').form({
username: {
identifier: 'username',
rules: [{
type: 'empty',
prompt: 'Please enter your username'
}]
},
password: {
identifier: 'password',
rules: [{
type: 'empty',
prompt: 'Please enter your password'
}]
}
}, {
onFailure: function() {
// prevent form submission (doesn't work)
return false;
},
onSuccess:function(event,fields){
// prevent form submission
// api / ajax call
return false;
}
});
source to share