modify validate function to accept variable

Question

I have a function (validate) which validates for correct email format on the front end first (to avoid most junk). At the moment it validates a single field and works fine. I tried modifying it to validate any field with class of "email" since there are several email fields on the same page. The second function (validateAny) works partially, it validates and shows the error message but does not add/remove the error class to the elements like it does in the first (validate) function. What am I missing here? Also, I'd like it not to validate the field if it is empty, then I'd like the check to be on the submit button instead. Check jsfiddle

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

function validate(){
  //$("#wrong-email-mess-create-process").text("");
  var email = $("#new-usr-name").val();
  if (validateEmail(email)) {
    $("#new-usr-name").removeClass('error');
    $("#new-usr-name").prev().removeClass('error');
    $(".error-mess").fadeOut('fast');
    //$("#wrong-email-mess-create-process").text(email + " is valid :)");
  } else {
    $("#new-usr-name").addClass('error');
    $("#new-usr-name").prev().addClass('error');
    $(".error-mess").fadeIn('fast');
    //$("#wrong-email-mess-create-process").text(email + " is not valid :(");
  }
  return false;
}

$("#new-usr-name").bind("blur", validate);



function validateAny(efield){
  var email = $(efield).val();
  if (validateEmail(email)) {
    $(efield).removeClass('error');
    $(efield).prev().removeClass('error');
    $(".error-mess").fadeOut('fast');
  } else {
    $(efield).addClass('error');
    $(efield).prev().addClass('error');
    $(".error-mess").fadeIn('fast');
  }
  return false;
}

$('.email').blur(function(){
    if( this.value ) {
    validateAny(this.id);
  }
});

AtheistP3ace · Accepted Answer · 2015-10-19 19:37:08Z

1

I believe its because you pass the id instead of the field in the blur event.

$('.email').blur(function(){
    if( this.value ) {
    validateAny(this);
  }
});

Or in your validateAny you need to add the id selector and then continue using the jquery object selected throughout the remainder of the function:

var $field = $('#' + efield);
var email = $field.val();

Updated fiddle: https://jsfiddle.net/d2wd6wh6/2/

edited Oct 19, 2015 at 19:37

answered Oct 19, 2015 at 19:24

AtheistP3ace

9,74112 gold badges45 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Caio César S. Leonardi · Accepted Answer · 2015-10-19 19:25:56Z

1

it seems like you're passing the id to the function, but jQuery needs the '#' identifier to know that you want to use the id of an element. Try this:

function validateAny(efield){
  efield = '#' + efield;
  var email = $(efield).val();
  if (validateEmail(email)) {
    $(efield).removeClass('error');
    $(efield).prev().removeClass('error');
    $(".error-mess").fadeOut('fast');
  } else {
    $(efield).addClass('error');
    $(efield).prev().addClass('error');
    $(".error-mess").fadeIn('fast');
  }
  return false;
}

answered Oct 19, 2015 at 19:25

Caio César S. Leonardi

5367 silver badges14 bronze badges

Collectives™ on Stack Overflow

modify validate function to accept variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related