[英]Angular JS: How to load angular js partial view page in specific element after button click
[英]Select specific element of a partial view
我在局部視圖中應用javascript函數有困難。
我的目標是驗證電子郵件是否正確鍵入,並根據條件的結果插入消息文本。
此電子郵件字段位於已加載的部分文檔中。 如果用戶有一個或多個電子郵件,則會加載此部分,從而根據需要加載盡可能多的部分。
我的問題是,對於頁面加載的每個部分,該函數都會復制,我希望部分驗證結果不會干擾其他部分。 請遵循下面的部分代碼。
<li class="control-group3 nested-fields">
<div class="form-group">
<label class="col-sm-2 control-label">Email:</label>
<div class="col-sm-5">
<%= person.text_field :name, class:"form-control" %>
</div>
</div>
<br/>
<div class="form-group">
<label class="col-sm-2 control-label">Email Type:</label>
<div class="col-sm-5">
<%= person.collection_select :email_type_id, @email_type,
:id, :name, {prompt: true}, {class: "form-control m-b"} %>
</div>
</div>
<br/>
<%= link_to_remove_association button_tag('Remover', type: "button", class: "btn btn-link"), person %>
<hr/>
</li>
<script>
**$("input[name*='[emails_attributes]']").blur(function() {**
var input = $(this).val();
function IsEmail(email) {
var exclude = /[^@\-\.\w]|^[_@\.\-]|[\._\-]{2}|[@\.]{2}|(@)[^@]*\1/;
var check = /@[\w\-]+\./;
var checkend = /\.[a-zA-Z]{2,3}$/;
if (((email.search(exclude) != -1) || (email.search(check)) == -1) || (email.search(checkend) == -1)) {
return false;
} else {
return true;
}
}
**if (IsEmail(input)) {
$(this).after("<div id='msgemail'>E-mail válido</div>");
} else {
$(this).after("<font color='red'>E-mail inválido </font>");
}**
});
</script>
首先,您需要將JavaScript邏輯與此部分分開(以避免邏輯重復)。
我建議采用另一種方法:
https://jsfiddle.net/vinceshere/np3v2qnf/28/
$(".email-validation").on("input", function() {
var email = $(this).val();
if (IsEmail(email)) {
showSuccess($(this));
} else {
showError($(this));
}
});
$("form").on("submit", function(event) {
event.preventDefault();
var email = $(this).find('.email-validation').val();
if (IsEmail(email)) {
showSuccess($(this));
} else {
showError($(this));
}
});
function showError(element) {
element.parents('form').find('.success').hide();
element.parents('form').find('.error').show();
}
function showSuccess(element) {
element.parents('form').find('.success').show();
element.parents('form').find('.error').hide();
}
function IsEmail(email) {
var exclude = /[^@\-\.\w]|^[_@\.\-]|[\._\-]{2}|[@\.]{2}|(@)[^@]*\1/;
var check = /@[\w\-]+\./;
var checkend = /\.[a-zA-Z]{2,3}$/;
if (((email.search(exclude) != -1) || (email.search(check)) == -1) || (email.search(checkend) == -1)) {
return false;
} else {
return true;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.