Validation on input field after adding a new field with same class

Question

I have an input field and "Add" button to store. While clicking the Add button another input field with the same class name should be created. But before creating there is a validation check. But the validation is only hitting first time. There is no validation check in the second time.

Below is my Code.

$('#add').click(function (e) {
                e.preventDefault();
                if ($('.js-user-email').val()) {
                    debugger;
                    $("#divSpecificToUserError span").text("");
                    $('#divSpecificToUserError').addClass("d-none");
                    if (ValidateEmailformat($('.js-user-email').val())) {
                        //debugger;
                        $.ajax({


                            type: "POST",
                            url: "Stepup.aspx/Exists",
                            data: JSON.stringify({ emailId: $('.js-user-email').val() }),
                            cache: false,
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            success: function (response) {
                                debugger;
                                if (response != null && response.d != null) {

                                    var data = response.d;
                                    if (data > 0) {
                                        addDynamicTextboxes();
                                    }
                                    else {
                                        $("#divSpecificToUserError span").text("not a valid user");
                                        $('#divSpecificToUserError').removeClass("d-none");
                                    }
                                }
                            },
                            failure: function (response) {
                                alert(response.d);
                            }
                        });
                    }
                    else {
                        $("#divSpecificToUserError span").text("Please enter email id in valid format");
                        $('#divSpecificToUserError').removeClass("d-none");
                    }
                }
                else {
                    $("#divSpecificToUserError span").text("No E-mail has been entered ");
                    $('#divSpecificToUserError').removeClass("d-none");
                }
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field form-group form-group-padding">
                      <label class="col-form-label">User E-mail(s) to Notify:</label>

                      <input type="text" id="field1" name="userEmail1" class="input form-control js-user-email" placeholder="example@domain.com" autofocus />
                      <button id="add" class="btn-sm btn-secondary add-more-specific pull-right btn-user-email" title="Add" type="button">+</button>

                      <div class="col-md-3 d-none alert-danger" id="divSpecificToUserError" style="margin-top: 6px">
                                    <span></span>

                      </div>
        </div>

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Nov 26 '19 at 09:54
When you add your click handler `$(".class").click(` it only applies to elements with that class that **exist at that time**. When you create a new ` — freedomn-m, Nov 26 '19 at 09:56

score 0 · Answer 1 · answered Nov 26 '19 at 09:50

0

$('.btn-user-email') if this is multiple elements you need to loop it and add click events to all elements in the jQuery list.

answered Nov 26 '19 at 09:50

Denny Johansson

41
2

Can you please show me how you are expecting to loop? – ReaL_HyDRA Nov 26 '19 at 09:55
No, you don't - jquery does that for you already on collections. – freedomn-m Nov 26 '19 at 09:56

Vandy Sodanheang · Answer 2 · 2019-11-28T07:31:04.823

0

Oh, I see what your problem is.

// Your Add Button Function
// to insert another input here

function add(){

  // Your Add Button Code Here

  refreshValidate();
}

// Validate Function
function refreshValidate(){
   $('.btn-user-email').each(function() {
       $(this).unbind();
       $(this).click(function (e) {
           e.preventDefault();

           // Your Validate Code HERE ...
       });
   });
}

edited Nov 28 '19 at 07:31

answered Nov 26 '19 at 10:03

Vandy Sodanheang

170
3
8

And where will the add function will be called? – ReaL_HyDRA Nov 26 '19 at 11:03
The add function will be called when you click on button add. – Vandy Sodanheang Nov 27 '19 at 03:36

Validation on input field after adding a new field with same class

2 Answers2