爲什麼提交關鍵輸入不工作

我有一個登錄表單，如果輸入重點，然後你按下輸入它會提示錯誤，要求你填寫的字段。但是，如果您填寫了這兩個字段，則不會出現錯誤，即使輸入了正確的憑據，然後按Enter鍵。什麼都沒發生。表單剛剛被重置。如果我點擊按鈕，它工作正常。爲什麼提交關鍵輸入不工作

我使用語義ui作爲前端框架並使用其表單驗證的錯誤。是因爲語義嗎？

here的鏈接，語義UI表單驗證的文檔

這裏是我的形式

<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，因爲這是

$(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' 
       }] 
      } 
     } 
    }); 
});

來源

2016-08-11 j.Doe

你實際上沒有做任何形式的事情嗎？ 'action =「」' –

@DarrenSweeney im張貼表單到相同的頁面 –

啊啊好的，嗯 - –

這裏的問題是，形式有2選項。
當你點擊輸入表單提交時，當你點擊按鈕，你的Javascript運行。
你不希望它提出，要觸發附加的JavaScript所以刪除形式method和形式action
這是一般規則，你讓表單提交處理提交，或者你讓JavaScript的處理它。

你可以從semantic ui docs形式犯規看到有一個方法或操作

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

來源

2016-08-11 15:03:17 Craicerjack

哦，我看到..但它將如何確定提交沒有方法或行動？ –

你是對的，但我修復它，並讓表單驗證激活表單提交。它現在的作品，謝謝！但刪除方法和行動meand我必須在JavaScript中添加方法amd行動？ –

是的。您在JavaScript中處理提交 – Craicerjack

我有同樣的問題。我更喜歡使用表單中的默認提交按鈕，而不是添加額外的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

注：我既表現出玉代碼中的按鈕顯示不同之處，您需要使用底部的按鈕。

來源

2016-09-17 08:02:07

爲什麼提交關鍵輸入不工作

回答

相關問題