I have a basic login form and I've specified the form validations and API call in my javascript file. The problem that I have is, when I click the login button and the form has errors, the invalid fields will be highlighted but the API call is still made, even though the form is invalid.

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 which demonstrates the issue I'm having.

Did I miss something? Are the .api() and .form() calls correct?

I have a basic login form and I've specified the form validations and API call in my javascript file. The problem that I have is, when I click the login button and the form has errors, the invalid fields will be highlighted but the API call is still made, even though the form is invalid.

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 which demonstrates the issue I'm having.

Did I miss something? Are the .api() and .form() calls correct?

• javascript
• jquery
• html
• semantic-ui

2 Answers 2

Ok I figured it out. All I need to do is change

$('form .submit.button').api(...

to

$('form').api(...

I didn't realise that I could call .api() directly on the <form> element. Now the api call isn't made when the form is invalid because the form isn't submitted (previously I had the api call on the submit button which isn't cancelled when the form is invalid).

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;
        }
    });