如何在DOM元素（在這種情況下的表單）上應用JavaScript自我

我創建了JavaScript來定位表單和它的元素，並且一切正常，直到表單在這樣的頁面上出現兩次page。在這樣的頁面上，JavaScript代碼只能用於第一種形式。我甚至嘗試過循環，但是...？所以幫我，......下面是代碼...如何在DOM元素（在這種情況下的表單）上應用JavaScript自我

HTML

<div class="row"> 
<div class="small-12 columns" id="subscribe_form"> 
    <span class="errors" id="subscriber_names_error"></span> 
    <input type="text" id="subscriber_names" placeholder="your names if you wish..."/> 
    <span class="errors" id="subscriber_email_error"></span> 
    <input type="email" id="subscriber_email" placeholder="your e-mail please!"/> 
    <span class="errors" id="subscribe_btn_error"></span> 
    <input type="submit" id="subscribe_btn" value="SUBSCRIBE" class="submit_btn"> 
</div>

的JavaScript

var subscriber_names = ""; 
var subscriber_email = ""; 

$("#subscriber_names").keyup(function(){ 
var val = $(this).val(); 
if(val == ""){ 
    $("#subscriber_names_error").html("<p style='color: #ffffff; background: #ff0000'>Fill in your names please.</p>"); 
    subscriber_names = ""; 
} else if(val.length < 5){ 
    $("#subscriber_names_error").html("<p style='color: #ffffff; background: #ff0000'>Names to short.</p>"); 
    subscriber_names = ""; 
} else { 
    $("#subscriber_names_error").html(""); 
    subscriber_names = val; 
} 
}); 

$("#subscriber_email").keyup(function(){ 
var val = $(this).val(); 
var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 

if(val == ""){ 
    $("#subscriber_email_error").html("<p style='color: #ffffff; background: #ff0000'>Fill in your e-mail please.</p>"); 
    subscriber_email = ""; 
} else if(re.test(val)){ 
    $("#subscriber_email_error").html(""); 
    subscriber_email = val; 
} else { 
    $("#subscriber_email_error").html("<p style='color: #ffffff; background: #ff0000'>Invalid E-mail.</p>"); 
    subscriber_email = ""; 
} 
}); 

$("#subscribe_btn").click(function(){ 

var subscribe_form_div = $("#subscribe_form"); 

if(subscriber_names != "" && subscriber_email != ""){ 
    $.ajax({ 
     type: 'POST', 
     url: 'ajax.php', 
     data: 'subscriber_email='+subscriber_email+'&subscriber_names='+subscriber_names, 
     success: function(message){ 
      subscribe_form_div.html("<img src='imgs/loading_two.gif' />"); 
      $("#subscribe_form").html(message); 
     } 
    }); 
} else { 
    $("#subscribe_btn_error").html("<p style='color: #ffffff; background: #ff0000'>Fill in correctly please.</p>"); 
    subscriber_email = "" 
} 
});

注：電子郵件正則表達式驗證是從here

來源

2016-09-21 Issa Abdullah

它不可推薦在同一頁中有兩個具有相同ID的itens，因爲它的什麼使元素獨一無二，當我在頁面中有兩次相同的表單時，我使用不同的表單ID和字段的相同類名稱，然後可以使用表單作爲驗證的參考。

我希望我已經回答了您的問題

來源

2016-09-21 15:14:14

Thanx @Lucas Schirm –

如何在DOM元素（在這種情況下的表單）上應用JavaScript自我

回答

相關問題