私はログインフォームを持っています

Question

私はログインフォームを持っています。ここで、入力されたフォーカスがフォーカスされ、Enterキーを押すと、フィールドの記入を求めるエラーが表示されます。しかし、両方のフィールドに記入すると、正しい資格情報を入力してからEnterキーを押しても、エラーは出なくなります。何も起こりません。フォームはちょうどリセットされます。私はボタンをクリックしてもうまく動作します。

私はフロントエンドフレームワークとしてセマンティックuiを使用しており、エラーのフォーム検証を使用しています。それは意味論のためですか？

hereセマンティックUIフォーム検証のマニュアルここで

のためのリンクは、それがここに

$(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

問題であるため、私のフォーム

<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> 

とJavaScriptでフォームが2を持っているということですオプション。
Enterキーを押すとフォームが送信され、ボタンをクリックするとJavascriptが実行されます。
は、あなたは、あなたは、フォームが提出を扱う提出してみましょう。これは、一般的にはルールですフォームmethod、フォームaction
を削除するか、あなたはJavaScriptを処理させるので 添付JavaScriptをトリガーにしたい、それが提出したくありませんそれ。

あなたはsemantic ui docsからフォームdoesntのは、私は同じ問題を抱えていたメソッドまたはアクション

<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> 

Answer 2

を持って見ることができるように。私は、フォームのデフォルトの送信ボタンを使用し、フォーム送信の作業を得るために余分なJavaScriptを追加しないことを好みます。

また、私はこのコードを持っていた：

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

をしかし、あなたはこれで、これを交換するとき：

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

をあなたは同じレイアウトを持ち、デフォルトボタンが動作して提出します。

それでも、フォームのアクションやメソッドを必要とするコースの

：私は両方を示した：

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

ところで、私はコード上のヒスイで、ヒスイテンプレートのレンダリングを使用している：

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 

注意玉のコードのボタンは、違いを表示するには、下のものを使用する必要があります。