Получение ошибки «this.is is not a function»

Question

Я создаю форму «Зарегистрироваться» для своего нового веб-сайта, но у вас возникла проблема с функцией jQuery/JS, которая должна проверять наличие каких-либо условий достиг.

$(function checkform() { 
if (this.is("#username")) { 
var validchars = /^[a-zA-Z0-9\s]+$/; 
var nameHasError; 
if (this.val().length < 6 && this.val().length > 26) { 
    nameHasError = true; 
    this.parent("div").addClass("has-error"); 
} else if (!(validchars.test(this).val())) { 
    nameHasError = true; 
    this.parent("div").addClass("has-error"); 
} else { 
    nameHasError = false; 
    this.parent("div").removeClass("has-error"); 
}; 
} else if (this.is("#password")) { 
var passHasError; 
if (this.val().length < 5 && this.val().length > 45) { 
    passHasError = true; 
    this.parent("div").addClass("has-error"); 
} else { 
    passHasError = false; 
    this.parent("div").removeClass("has-error"); 
}; 
}; 
}); 

Вот JSFiddle с HTML-части (я использую самозагрузки на моем сайте, но предпочел установить определенный класс на скрипке)

наилучшими пожеланиями

Answer 1

Есть несколько вопросов в коде

• Вы определили checkForm в $(), так что функция будет доступна только внутри йот готового обработчика, так что ваш onkeypress выдаст ошибку
• Когда дом готовы обработчик вызывает функцию this будет объект документа, который не имеет функцию is проверки размера
• персонаж должен использовать || не &&

Так, ти будет лучше использовать обработчик событий JQuery с оба поля, имеющие свои собственные функции проверки как

jQuery(function($) { 
 
    $('#username').on('keypress', function() { 
 
    var validchars = /^[a-zA-Z0-9\s]+$/; 
 
    var nameHasError = false; 
 
    var $this = $(this), 
 
     value = this.value; 
 
    if (value.length < 6 || value.length > 26) { 
 
     nameHasError = true; 
 
    } else if (!validchars.test(value)) { 
 
     nameHasError = true; 
 
    }; 
 
    $this.parent("div").toggleClass("has-error", nameHasError); 
 
    }); 
 
    $('#password').on('keypress', function() { 
 
    var passHasError = false; 
 
    var $this = $(this), 
 
     value = this.value; 
 
    if (value.length < 5 || value.length > 45) { 
 
     passHasError = true; 
 
    }; 
 
    $this.parent("div").toggleClass("has-error", passHasError); 
 
    }); 
 
});

.has-error { 
 
    background-color: red; 
 
} 
 
.has-success { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div class=""> 
 
    <label for="username">Username</label> 
 
    <input type="text" class="form-control" id="username" placeholder="Between 6 and 26 characters"> 
 
    <span id="unameError"></span> 
 
    </div> 
 
    <br/> 
 
    <div class=""> 
 
    <label for="password">Password</label> 
 
    <input type="password" class="form-control" id="password" placeholder="Password"> 
 
    <span id="passError"></span> 
 
    </div> 
 
</div>

Answer 2

Вы смешиваете ваниль Javascript с JQuery синтаксис. this.is('#username') не является javascript.

this.id == "username" использования (ваниль JS) вместо

ИЛИ

$(this).is('#username') (JQuery)

Позаботьтесь с объем в ваших функциях

Answer 3

function checkform() { 
 
    if ($(this).is("#username")) { 
 
    var validchars = /^[a-zA-Z0-9\s]+$/; 
 
    var nameHasError; 
 
    if ($(this).val().length < 6 || $(this).val().length > 26) { 
 
     nameHasError = true; 
 
     $(this).parent("div").addClass("has-error"); 
 
    } else if (!(validchars.test($(this).val()))) { 
 
     nameHasError = true; 
 
     $(this).parent("div").addClass("has-error"); 
 
    } else { 
 
     nameHasError = false; 
 
     $(this).parent("div").removeClass("has-error"); 
 
    }; 
 
    } else if ($(this).is("#password")) { 
 
    var passHasError; 
 
    if ($(this).val().length < 5 || $(this).val().length > 45) { 
 
     passHasError = true; 
 
     $(this).parent("div").addClass("has-error"); 
 
    } else { 
 
     passHasError = false; 
 
     $(this).parent("div").removeClass("has-error"); 
 
    }; 
 
    }; 
 
} 
 

 
$(function() { 
 
\t $('input').on('keyup', checkform); 
 
})

.has-error { 
 
    background-color: red; 
 
} 
 

 
.has-success { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div class=""> 
 
    <label for="username">Username</label> 
 
    <input type="text" class="form-control" id="username" placeholder="Between 6 and 26 characters"> 
 
    <span id="unameError"></span> 
 
    </div> 
 
    <br/> 
 
    <div class=""> 
 
    <label for="password">Password</label> 
 
    <input type="password" class="form-control" id="password" placeholder="Password"> 
 
    <span id="passError"></span> 
 
    </div> 
 
</div>