why submit on key enter not working

Question

I have a login form where if the input sn on focus and then you press enter it will prompt errors asking you to fill out the fields. But if you fill out both fields, no error comes out and even when you enter the correct credentials and then press enter. nothing happens. the form just gets reset. It works fine if I click the button though.

I am using semantic ui as front-end framework and using its form validation for the errors. Is it because of semantic?

here the link for semantic ui form validation's documentation

Here is my form

<form id="login" class="ui large form" method="post" action="">
    <div class="ui stacked secondary  segment">
        <div class="field">
            <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" name="username" placeholder="Nama Pengguna">
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" name="password" placeholder="Kata laluan">
            </div>
        </div>
        <input type="submit" name="btn-login" value="Log-masuk" class="ui fluid large teal submit button">
    </div>

    <div class="ui error message"></div>
</form>

and the javascript for it is

$(document).ready(function() {
    $('.ui.form').form({
        fields: {
            username: {
                identifier: 'username',
                rules: [{
                    type: 'empty',
                    prompt: 'Sila masukkan Nama Pengguna'
                }]
            },
            password: {
                identifier: 'password',
                rules: [{
                    type: 'empty',
                    prompt: 'Sila masukkan Kata Laluan'
                }]
            }
        }
    });
});

Answer 1

I had the same problem. I prefer to use the default submit button in a form, and not add extra javascript to get a form submit working.

I also had this code:

<div class="ui fluid large blue submit button">
   <p>Register</p>
</div>

But when you replace this with this:

<button type="submit" class="blue fluid large ui button">Register</button>

You have the same layout, and the default submit button is working.

of course you still need the form action and method:

<form action="/register/process-form" method="POST" class="ui large form">

by the way, i use jade template rendering, in jade above codes are:

    form.ui.large.form(action="/register/process-form" method="POST")
      div.ui.stacked.segment
       div.field
         div.ui.left.icon.input
           i.user.icon
           input(type="text" name="email" placeholder="E-mail adres")
         div.ui.fluid.large.blue.submit.button
           p Register
         button.blue.fluid.large.ui.button(type="submit") Register

Note: i showed both buttons in the jade code to show the difference, you need to use the bottom one.

Answer 2

The problem here is that the form has 2 options.
When you hit enter the form submits and when you click the button, your Javascript runs.
You dont want it to submit, you want to trigger the attached JavaScript so remove the form method and the form action
This is a rule in general, you let the form submit handle the submission, or you let the JavaScript handle it.

As you can see from the semantic ui docs the form doesnt have a method or action

<div class="ui horizontal divider">or</div>
<form class="ui form segment">
  <div class="two fields">
    <div class="field">
      <label>Username</label>
      <input placeholder="Username" name="username" type="text">
    </div>
    <div class="field">
      <label>Password</label>
      <input type="password" name="password">
    </div>
  </div>
  <div class="inline field">
    <div class="ui checkbox">
      <input type="checkbox" name="terms">
      <label>I agree to the terms and conditions</label>
    </div>
  </div>
  <div class="ui blue submit button">Submit</div>
  <div class="ui error message"></div>
</form>