2017-01-05 4 views
0

私はユーザーログインにHTML 5検証を使用しようとしています。しかし、フォームが送信された後、私はajaxを使ってサーバー上で認証します。それが失敗した場合は、setCustomValidity(msg)メソッドを使用します。ただし、このメソッドは検証メッセージを表示または表示せず、次の送信または変更時に表示します。私はそれをすぐに引き出すためにどうすればよいですか?HTML5 customValidty - 描画方法は?

さらに、maxlengthという制約がありますが、minlengthはありますか?

以下はHTMLフォームとjavascriptです。送信後、フォームが無効な場合、メッセージは取得されますが描画されません。

$(function() { 
 
    $('form#login_form').submit(function(e) { 
 
     console.log("submit"); 
 
     $.post('/auth_user', $(this).serialize(), function (data) { 
 
      console.log(data); 
 
      if(data != "") { 
 
       login_password.setCustomValidity(data); 
 
      } 
 
     }); 
 
     e.preventDefault(); 
 
    }); 
 
});
<form action="/dashboard" id="login_form" method="post"> 
 
        <div class="field-wrap"> 
 
         <label> 
 
          Email Address<span class="req">*</span> 
 
         </label> 
 
         <input type="email" name="email" id="login_email" required autocomplete="off"/> 
 
        </div> 
 
        <div class="field-wrap"> 
 
         <label> 
 
          Password<span class="req">*</span> 
 
         </label> 
 
         <input type="password" name="password" id="login_password" required autocomplete="off"/> 
 
        </div> 
 
        <p class="forgot"><a href="#">Forgot Password?</a></p> 
 
        <button type="submit" class="btn btn-lg btn-primary"/>Log In</button> 
 
</form>

+0

Questionに 'html'、' css'を含めることができますか? _ "HTML5 customValidty - 描画方法" _、_ "ユーザーログインにHTML 5検証を使用しようとしています。"要件が 'html5'を使用する場合、期待される結果を達成するために' javascript'も使用しないという要件ですか? – guest271314

+0

私はhtmlフォームとjavascriptを追加しました。 HTML5の組み込み検証ポップアップ(たとえばcustomValidityを使用)を使用したいだけです。そうでなければ、私はjavascriptを使用しますが、強制的に表示する方法はわかりません。 –

+0

'login_password.setCustomValidity(data)'とは何ですか?期待どおりの結果を得るには 'html5'や' javascript'を使う必要がありますか? – guest271314

答えて

1

形態の要素のいずれかが無効であれば技術的に、form要素にreportValidity機能は、適切な検証メッセージを表示すべきです。

リンクの下部にある互換性マトリックスによれば、Internet ExplorerやSafariでは2017-01-05現在では機能しません。

関連する問題