電子メールの検証がブートストラップとhtml5で機能しないのはなぜですか？

Question

私は私のページに次の形式があります。

<div class="form-group"> 

    <form class="form-horizontal general subscribe" name="commentform" id="subscribe" method="post" action="#"> 
    <div class="col-lg-8 col-md-8 col-xs-8 lower"> 
     <input type="email" placeholder="Enter your email" class="email requiredField form-control" name="subscribe_email" /> 
    </div> 
    <div class="col-lg-4 col-md-4 col-xs-4"> 
     <input type="submit" class="btn btn-fill btn-info form_submit" value="Subscribe"/> 
    </div> 
    <div id="form_results"></div> 
    </form> 
</div> 

を、次のように電子メールのものを処理するための私のjqueryのコードは次のとおりです。

jQuery(document).ready(function($) { 
    "use strict"; 

    $('.form_submit').click(function() { 
     var form = $(this).parents('form'); 

     $.ajax({ 
     url: 'http://mywebservice/mail', 
     type: "POST", 
     data: { 
      email: $('input[name=subscribe_email]').val() 
     }, 
     dataType:'json', 
     success: function(response) { 
      output = '<p>Thanks, we will contact you soon!</p>'; 

      $("#contacts_form .form_item").val(''); 
      form.find('.form_inner').slideUp(); 
      form.find("#form_results").hide().html(output).slideDown(); 
     } 
    }); 
    return false; 
    }); 
}); 

、今メールがデータベースにsuccessfulyたびに追加されますユーザーは[Subscribe]ボタンを押しますが、問題は、電子メールが正式な電子メールパターンで検証されていないことです。私はhtml5で唯一必要なチェックは<input type="email"だと思ったが、正しく動作しない...ユーザが間違った電子メールアドレスをデータベースに追加しないようにするには？

Answer 1

あなたは、通常のsubmitボタンを使用して、あなたsubmitフォームは、その後requiredフィールドが自動的に検証されている場合validated

<input type="email" placeholder="Enter your email" class="email requiredField form-control" name="subscribe_email" required="required" /> 

するフィールドのrequired属性を追加する必要があります。

あなたがrequiredコントロールを検証するためにform.checkValidity()を使用することができます あなたがjavasript functionsubmit上のボタンをsubmittingか、呼び出している場合。

jQuery(document).ready(function($) { 
    "use strict"; 

    $('.form_submit').click(function(){ 
     var form = $(this).parents('form'); 
     form.checkValidity() 
      $.ajax({ 
       url: 'http://mywebservice/mail', 
       type: "POST", 
       data: { 
        email: $('input[name=subscribe_email]').val() 

       }, 
       dataType:'json', 
       success: function(response) 
       { 
        output = '<p>Thanks, we will contact you soon!</p>'; 
        $("#contacts_form .form_item").val(''); 
        form.find('.form_inner').slideUp(); 
        form.find("#form_results").hide().html(output).slideDown(); 
       } 
      }); 
    return false; 
}); 

}); 

Answer 2

<input type="email"とページには、JavaScriptのエラーが同様に存在しないことを確認するためにrequired属性を追加します。

Answer 3

inputでrequiredの属性を追加する必要があります。type emailは、検証を実行する前に必要です。あなたはまた、https://jqueryvalidation.org/に見ることができます

<input type="email" placeholder="Enter your email" class="email requiredField form-control" name="subscribe_email" required /> 

は、私はそれとその素晴らしいを使用するには、うーん、私は必要=「必須」 `とだけ` required` `加えることが、試してみましたあなたはユーザー