选择局部视图的特定元素

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