prevent function from recalling itself at the last statement of the function in java script

Question

I've been learning javascript and jquery and I've encountered a problem when I'm trying to validate my form fields using a jquery function. The problem is its working fine the first two times it is called (when I press the update button for a specific element )and whenever I'm trying to call it a third time (by pressing the update button for the same element as earlier ) it is calling itself but I clearly did not mention any recursive calls and am not calling it within the function again. I'm not sure why it is calling itself. Kindly help me out. I will be attaching the fiddle. After triggering reset in main.updateData(Object.assign({}, main.newObject), keys); in the third time its showing the name empty error which shouldn't be happening.

I've tried giving breakpoints and inspecting the reason behind this weird behaviour but I couldn't

The name field should show an error only when it is empty but third time it is showing error even when it is not empty

FIDDLE

validateFormData: function(value, keys, idCount) {

  var keyIndex = 0;
  main.newObject[keys[keyIndex++]] = idCount;



  if (value == "update") {
    main.newObject[keys[0]] = $(".active-contact").attr('id');

    //alert("new updated id is " + main.newObject[keys[0]]);
  }
  var validElementsCount = 0;
  var alphabet_pattern = /^[a-z]+\s*/i;
  var email_pattern = /[a-z]{0,}[0-9]{0,4}[.]{0,1}[0-9]{0,4}[a-z]{0,8}[0-9]{0,4}[@][a-z]{0,20}[.](com)/i;
  var number_pattern = /^[0-9]{10}$/;
  var website_pattern = /^(www)[.][a-z]{1,20}[.](com)$/i;

  /*Validating the form inputs against the regex pattern*/
  if ($("#employee-name").val() == "") {
    $("#employee-name-error").text("name cannot be empty");
  } else if (!alphabet_pattern.test($("#employee-name").val())) {
    $("#employee-name-error").text("Only alphabets are allowed");
  } else {
    validElementsCount++;
    $("#employee-name-error").text("");
    main.newObject[keys[keyIndex++]] = $("#employee-name").val();
    //alert("object is  " + JSON.stringify(main.newObject[keys[keyIndex-1]]) + " key is " + keys[keyIndex-1]);
  }



  //employee email validation
  if (email_pattern.test($("#employee-email").val()) || $("#employee-email").val() == "") {
    $("#employee-email-error").text("");
    validElementsCount++;
    main.newObject[keys[keyIndex++]] = $("#employee-email").val();
    //alert("object is  " + JSON.stringify(main.newObject[keys[keyIndex - 1]]) + " key is " + keys[keyIndex - 1]);
  } else {
    $("#employee-email-error").text("Follow email pattern");
  }


  //employee mobile validation
  if (number_pattern.test($("#employee-mobile").val()) || $("#employee-mobile").val() == "") {
    $("#employee-mobile-error").text("");
    validElementsCount++;
    main.newObject[keys[keyIndex++]] = $("#employee-mobile").val();
    //alert("object is  " + JSON.stringify(main.newObject[keys[keyIndex - 1]]) + " key is " + keys[keyIndex - 1]);
  } else {
    $("#employee-mobile-error").text("Only 10 digit number is allowed");
  }


  //employee landline no validataion
  if (number_pattern.test($("#employee-land-line").val()) || $("#employee-land-line").val() == "") {
    $("#employee-land-line-error").text("");
    validElementsCount++;
    main.newObject[keys[keyIndex++]] = $("#employee-land-line").val();
    //alert("object is  " + JSON.stringify(main.newObject[keys[keyIndex - 1]]) + " key is " + keys[keyIndex - 1]);
  } else {
    $("#employee-land-line-error").text("Only 10 digit number is allowed");
  }


  //employee website validation
  if (website_pattern.test($("#employee-website").val()) || $("#employee-website").val() == "") {
    $("#employee-website-error").text("");
    validElementsCount++;
    main.newObject[keys[keyIndex++]] = $("#employee-website").val();

  } else {
    $("#employee-website-error").text("Follow website pattern");
  }

  main.newObject[keys[keyIndex++]] = $("#employee-address").val();

  if (validElementsCount == 5) {
    if (value == "add") {

      main.addEmployeeClick(Object.assign({}, main.newObject));
      $(".employee-details-form").trigger("reset");

    } else if (value == "update") {
      //alert("new object is " + JSON.stringify(Object.assign({}, main.newObject), keys));
      main.updateData(Object.assign({}, main.newObject), keys);
      $(".employee-details-form").trigger("reset");

    }

  }

},

Answer 1

You can add .off() before #update-employee-btn click event binding in line 34.

 $("#update-employee-btn").off().click(....)

Let me know if it works for you as well.