CODEWITHSUNDEEP
javascriptjquery
James
James

Reputation: 1706

jQuery finding element by ID and if exists to remove it

I'm having a issue where I cant remove the error msg if it exists;

if you click in input and then out or if not valid email shows error, but click in and out again and repeats the error msg,

if the error exists I want to remove it and add again or if exists to not add again until valid? any ideas?

function validEmail(v) {
  var r = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
  return (v.match(r) == null) ? false : true;
}
$(document).ready(function() {
  $('input').blur(function() {

    var email = $(this).val();
    var emailError = "<p>The email address in the <b>E-mail</b> field is invalid.</p>";
    var emailInputId = $(this).attr('id');
    if ($("#" + emailInputId + "_error_message").length) {
      $("#" + emailInputId + "_error_message").remove();
    }
    console.log($(emailInputId + "_error_message"));
    if (validEmail(email)) {
      //alert('valid email');
      /*$.ceAjax('request', fn_url('ac.email'), {
        method: 'post',
        data: {
          'email': email
        },
        caching: true
      });*/
      $(this).removeClass('cm-failed-field');
      $(this).prev().removeClass('cm-failed-label');
      $(this).next("span").remove();
    } else {
      $(this).addClass('cm-failed-field');
      $(this).prev().addClass('cm-failed-label');
      $(this).after("<span id=" + emailInputId + "_error_message' class='help-inline'><p>" + emailError + "</p></span>");
    }

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input x-autocompletetype="email" type="text" id="elm_32" name="user_data[email]" size="32" value="" class="ty-input-text cm-skip-avail-switch  cm-focus cm-failed-field">

Upvotes: 1

Views: 65

Answers (1)

Alvaro Silvino
Alvaro Silvino

Reputation: 9743

Change the id (#) for class (.)

The Id in html document is an attribute to identify uniquely an element.

The Jquery, only get the first element when the selector is an id (#).

if ($("." + emailInputId + "_error_message").length>0) {
          $("." + emailInputId + "_error_message").remove();
        }


  $(this).after("<span class=" + emailInputId + "_error_message 
                   help-inline' ><p>" + emailError + "</p></span>");


function validEmail(v) {
  var r = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
  return (v.match(r) == null) ? false : true;
}
$(document).ready(function() {
  $('input').blur(function() {

    var email = $(this).val();
    var emailError = "<p>The email address in the <b>E-mail</b> field is invalid.</p>";
    var emailInputId = $(this).attr('id');
    if ($("." + emailInputId + "_error_message").length>0) {
      $("." + emailInputId + "_error_message").remove();
    }
    if (validEmail(email)) {
      //alert('valid email');
      /*$.ceAjax('request', fn_url('ac.email'), {
        method: 'post',
        data: {
          'email': email
        },
        caching: true
      });*/
      $(this).removeClass('cm-failed-field');
      $(this).prev().removeClass('cm-failed-label');
      $(this).next("span").remove();
    } else {
      $(this).addClass('cm-failed-field');
      $(this).prev().addClass('cm-failed-label');
      $(this).after("<span class='" + emailInputId + "_error_message help-inline' ><p>" + emailError + "</p></span>");
    }

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input x-autocompletetype="email" type="text" id="elm_32" name="user_data[email]" size="32" value="" class="ty-input-text cm-skip-avail-switch  cm-focus cm-failed-field">

Upvotes: 1

Related Questions