爲什麼我的電子郵件驗證不起作用在bootstrap和html5上？

我有我的網頁上的格式如下：爲什麼我的電子郵件驗證不起作用在bootstrap和html5上？

<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; 
    }); 
});

現在的郵件表被成功添加到每個時間數據庫用戶按下「訂閱」按鈕，但問題是電子郵件未通過官方電子郵件模式進行驗證。我認爲在html5中唯一必要的檢查是這個<input type="email"，但它不能正常工作......我怎樣才能防止用戶添加錯誤的電子郵件地址到數據庫？

來源

2016-06-18 user3766930

你，如果你submit形式使用正常的submit按鈕，然後required字段自動驗證需要添加required屬性的字段設置爲validated

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

。

如果你是submitting或呼籲submit按鈕javasript function然後你可以使用form.checkValidity()驗證required控制。

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; 
}); 

});

來源

2016-06-18 13:48:20 Mairaj

嗯，我嘗試添加'=需要「必需的」'，也只有'required'，但兩者都不起作用......我做錯了什麼？ :( – user3766930

你只需要通過'required'，檢查我發佈的回答低於 – akinjide

@ user3766930請參閱更新 – Mairaj

附加required屬性爲<input type="email"並確保有頁面上沒有JavaScript錯誤也是如此。

來源

2016-06-18 13:57:17 Sami

它沒有工作:(顯然腳本會立即被調用，並且記錄會在沒有事先驗證的情況下進入數據庫 – user3766930

您需要添加required屬性根據HTML input與type email要求在它可以執行任何驗證之前。

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

您也可以看看https://jqueryvalidation.org/，我用它和它的真棒，它允許您顯示自定義消息，用戶

來源

2016-06-18 14:02:01 akinjide

爲什麼我的電子郵件驗證不起作用在bootstrap和html5上？

回答

相關問題