選擇局部視圖的特定元素

Question

我在部分視圖內部應用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> 

Answer 1

首先，您需要將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; 
    } 
}