部分ビューの特定の要素を選択

Question

部分ビュー内でJavaScript関数を適用するのが難しいです。

私の目標は、電子メールが正しく入力されたことを確認し、条件の結果に応じてメッセージテキストを挿入することです。

このメールフィールドは、読み込まれた部分の内部にあります。この部分は、ユーザーが1つ以上の電子メールを持っている場合にロードされ、必要に応じて多くの部分を読み込みます。

ここで私の問題は、私のページが読み込まれたすべての部分に対して、関数が複製されていることです。部分的な検証結果が他の部分と干渉しないようにしたいと思います。 以下の部分コードに従ってください。

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