Как найти элемент Dom через переменную?

Question

[parkito]

Здравствуйте. Помогите, пожалуйста, понять почему не работает следующий код.

$(document).ready(function () {
    //Email validation
    $('#email').on('input', function () {
        emailValidation('email');
    });

 function emailValidation(fieldName) {
        var input = $('#' + fieldName).val();  //почему данное выражение не валидно
        var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+[a-z]*$/;
        var is_email = re.test(input);
        setBorderStyle(is_email, fieldName)
    }

Однако получаю

Uncaught Error: Syntax error, unrecognized expression: #[object HTMLInputElement]
    at Function.ga.error (jquery.min.js:2)
    at ga.tokenize (jquery.min.js:2)
    at ga.select (jquery.min.js:2)
    at Function.ga [as find] (jquery.min.js:2)
    at r.fn.init.find (jquery.min.js:2)
    at r.fn.init (jquery.min.js:2)
    at r (jquery.min.js:2)
    at emailValidation (validator.js:41)
    at HTMLInputElement.<anonymous> (validator.js:4)
    at HTMLInputElement.dispatch (jquery.min.js:3)

При вводе в поле я попадаю в

$('#email').on('input', function ()

После падаю на $('#' + fieldName).val();.

Что можно предпринять в этой ситуации?

Comments

[kulaeff]

По ошибке видно, что переменная fieldName не является строкой, а имеет тип HTMLInputElement, хотя должна быть строка. Что показывает console.log(fieldName)?

[kulaeff]

А что за функция setBorderStyle?

[parkito]

kulaeff, Аналогичную. Как вы можете видеть я передаю в функцию именно строчку. Не понимаю почему она передается в другом виде.@kulaeff,

[parkito]

kulaeff,

function setBorderStyle(isCorrect, fieldName) {
        if (isCorrect) {
            $('#' + fieldName).css('border-width', '3px');
            $('#' + fieldName).css('border-color', 'green');
        }
        else {
            $('#' + fieldName).css('border-width', '3px');
            $('#' + fieldName).css('border-color', 'red');
        }
    }

[kulaeff]

parkito, что значит аналогичную? console.log(fieldName) показывает аналогичную ошибку?

[parkito]

kulaeff,

Uncaught Error: Syntax error, unrecognized expression: #[object HTMLInputElement]
    at Function.ga.error (jquery.min.js:2)
    at ga.tokenize (jquery.min.js:2)
    at ga.select (jquery.min.js:2)
    at Function.ga [as find] (jquery.min.js:2)
    at r.fn.init.find (jquery.min.js:2)
    at r.fn.init (jquery.min.js:2)
    at r (jquery.min.js:2)
    at emailValidation (validator.js:41)
    at HTMLInputElement.<anonymous> (validator.js:4)
    at HTMLInputElement.dispatch (jquery.min.js:3)

[kulaeff]

parkito, что-то после console.log(fieldName) стек-трейс никак не поменялся. Например, ссылки на строки остались такими же. WTF?

[kulaeff]

parkito, то ли ошибка где-то совсем в другом месте (возможно функция emailValidation вызывается где-то еще), то ли сборка где-то накосячила (если используете сборку вообще), то ли еще что-то.

[parkito]

kulaeff, У меня тупо Html и к нему прикреплен js в виде скрипта.

[ой всё]

а скобки у вас закрыты или так и выполняете, как сюда скопировали?

Answer 1

[Stalker_RED]

Можно вообще убрать этот лишний поиск в DOM

$(document).ready(function () {
    $('#email').on('input', function () {
        emailValidation(this.value);
    });

 function emailValidation(email) {
        // your regexp stuff here
        ...
}

Comments

[parkito]

Это не решает всех моих проблем. Мне потом нужно перекрашивать поле. Функция перекрашивания одна - я там так же обрабатываю имя нужного поля.

[Stalker_RED]

parkito, как-то так?

$(document).ready(function () {
    $('#email').on('input', function () {
        emailValidation(this);
    });

 function emailValidation(elem) {
    var myInput = $(elem)
    myInput.css('border', 'solid 1px orange')
    // your regexp stuff here
    ...
}

Answer 2

[abberati]

Всё ж работает, в чём проблема?