Onchange function does not work

Question

Good afternoon, I have a function that checks if the typed email exists in the bank, and if the email is valid. Follow the function:

<script type = "text/javascript" >
  function validateEmail(emailField) {
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    if (reg.test(emailField.value) == false) {
      alert('Email inválido.');
      emailField.value = '';
      return false;
    }
    document.getElementById("btnValidaEmail").click()
    return true;

  }

  </script>

This is the html of the txtemail field:

<asp:TextBox ID="txtEmail" runat="server" class="form-control" onChange="validateEmail(this);"></asp:TextBox>

The Validate email button:

<asp:Button ID="btnValidaEmail" runat="server" Text="Button" Style="display: none" OnClick="btnValidaEmail_Click" />

And the function that is in btnValidaEmail:

clslogin pegaid = new clslogin();
SqlConnection conConexao3 = clsdb.AbreBanco();
if (txtid.Text != "") {
  clslogin log = new clslogin();
  SqlCommand cmd3 = new SqlCommand("SELECT email from pessoa where email ='" + txtEmail.Text + "' and id != '" + txtid.Text + "'", conConexao3);

  SqlDataReader dr3 = cmd3.ExecuteReader();

  if (dr3.HasRows == true) {
    if (dr3.Read()) {
      veremail = true;
      txtEmail.Text = "";
      ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Email já existe em outro cadastro.');", true);
    }
  }
} else {
  clslogin log = new clslogin();
  SqlCommand cmd3 = new SqlCommand("SELECT email from pessoa where email ='" + txtEmail.Text + "'", conConexao3);

  SqlDataReader dr3 = cmd3.ExecuteReader();

  if (dr3.HasRows == true) {
    if (dr3.Read()) {
      veremail = true;
      txtEmail.Text = "";
      ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Email já existe em outro cadastro.');", true);
    }
  }
}

In a form that already has txtid, it works perfectly, but in a new form without data, when filling the email it only checks if the email is valid, and does not check if it exists in the system, it does not even enter the function, I put an Alert before if(txtid!="")And neither did Alert get in, any idea what might be going on? Thanks.

Answer 1

You can use jQuery to do as follows to call the Onchange.

$(document).ready(function () {
    function validateEmail(emailField) {
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField) == false) {
            alert('Email inválido.');
            emailField.value = '';
            return false;
        }
        $("[id$='btnValidaEmail']").click();
        return true;

    }

    $("[id$='txtEmail']").on('change', function () {
        validateEmail($(this).val());
    })
});

Another very important thing, but related to your code from your button to validate if the email already exists, never use string concatenation to mount SQL trunks. If you use concatenation, you are leaving your system vulnerable to SQL Injection

Rewrite an example of its validation using the parameter pass option in the statement select

SqlCommand cmd3 = new SqlCommand("SELECT email from pessoa where email = @email and id != @id", conConexao3);
cmd3.Parameters.AddWithValue("@email", txtEmail.Text);
cmd3.Parameters.AddWithValue("@id", txtid.Text);

In my github You can see the example of the code I’ve assembled for the answer.